CODEWITHSUNDEEP
javascriptknockout.js
BeniaminoBaggins
BeniaminoBaggins

Reputation: 12433

Knockout JS style binding causing error

I need to data-bind a background-image to a div using the knockout js style attribute. I am data-binding product.image. Product.image is a string of the image file name. I need to however, add the path to the file before the file name.

Code:

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

But it causes this console error:

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

Why is it causing that error?

Here is all my code:

<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>

Upvotes: 0

Views: 1312

Answers (1)

Aditya Singh
Aditya Singh

Reputation: 16650

Its because you need to use camel case for background-color as backgroundColor. Refer: http://knockoutjs.com/documentation/style-binding.html

Upvotes: 2

Related Questions