Question

我需要使用knockout js data-bind属性background-image div到style。我是数据绑定product.image。 Product.image是图像文件名的字符串。但是，我需要在文件名之前添加文件的路径。

代码：

<div data-bind="style: { background-image: 'url(../../the_vegan_repository/product_images/'+ product.image + ')' }"

但它会导致此控制台错误：

Uncaught SyntaxError：无法解析绑定。绑定值：style：{background-image：'url（../../ the_vegan_repository / product_images /'+ product.image} 消息：意外的令牌 -

为什么会导致该错误？

这是我的所有代码：

<script type="text/html" id="product-template">
    <div class="col-sm-6 col-lg-2 clickable" style="margin-top:20px; padding: 25px;">
        <div style="border-radius: 15px; border: 5px solid #fc4747;height: 270px;overflow: hidden;">
            <div data-bind="style: { background-image: 'url(../../the_vegan_repository/product_images/'+ product.image + ')' }"
                 style= "height: 180px; 
                        border-top-left-radius: 10px; 
                        border-top-right-radius: 10px;
                        color: white; 
                        background: center no-repeat;
                        background-image: url(../../the_vegan_repository/product_images/alpro_custard.jpg);
                        background-size:cover;
                        vertical-align:bottom;">
            </div>
            <div style="height: 90px; padding: 10px; background: #fc4747;">
                <h6 class="medium-text" data-bind="text: product.name" style="text-transform: uppercase; color: white; margin-top:0; margin-bottom:5px;"></h6>
                <h6 class="medium-text" data-bind="text: shop.name" style="text-transform: uppercase; color: white; margin-bottom:5px;display: inline;"></h6>
                <h6 class="medium-text" data-bind="text: shop.suburb" style="text-transform: uppercase; color: white; margin-bottom:5px;display: inline;"></h6>
            </div>
        </div>
    </div>
</script>

Answer 1

因为您需要将null的驼峰用例用作background-color。请参阅：http://knockoutjs.com/documentation/style-binding.html

Knockout JS样式绑定导致错误

1 个答案: