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
Post a Comment