javascript - Knockout JS 样式绑定(bind)导致错误

Question

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

代码:

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

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

Uncaught SyntaxError: Unable to parse bindings. Bindings value: style: { background-image: 'url(../../the_vegan_repository/product_images/'+ product.image } Message: Unexpected token -

为什么会导致该错误？

这是我的所有代码:

<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

这是因为您需要将background-color使用驼峰式大小写作为backgroundColor。引用:http://knockoutjs.com/documentation/style-binding.html