Knockout JS 样式绑定导致错误

Question

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

代码：

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

但它会导致这个控制台错误：

未捕获的语法错误：无法解析绑定。 绑定值：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

因为background-color 需要使用驼峰式大小写作为backgroundColor。参考：http://knockoutjs.com/documentation/style-binding.html