javascript - Knockout JS style binding causing error -


i need data-bind background-image div using knockout js style attribute. data-binding product.image. product.image string of image file name. need however, add path file before file name.

code:

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

but causes console error:

uncaught syntaxerror: unable parse bindings. bindings value: style: { background-image: 'url(../../the_vegan_repository/product_images/'+ product.image } message: unexpected token -

why causing error?

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

its because need use camel case background-color backgroundcolor. refer: http://knockoutjs.com/documentation/style-binding.html


Comments

Popular posts from this blog

javascript - How to get current YouTube IDs via iMacros? -

c# - Maintaining a program folder in program files out of date? -

emulation - Android map show my location didn't work -