Menu
I cannot see what is wrong here but the image does not display using the following Knockout template:
<script type="text/html" id="legend-template"> <div><input type="checkbox" data-bind="click : doSomething" ></input> <img width="16px" height="16px" data-bind="src: 'imagePath'" /> <span data-bind="text : label"> </span> </div> </script> The object this is being bound to looks like this:
tut.myObject= function (imagePath, label) { this.label = ko.observable(label); this.imagePath = ko.observable(imagePath || liveString + '/Content/images/marker.png'); }; tut.myObject.prototype = { doSomething: function () { alert("do what?"); } }; When the HTML object is rendered I see the label and clicking on the checkbox invokes doSomething.
TIA.
764
To activate Knockout, add the following line to a <script> block: ko. applyBindings(myViewModel); You can either put the script block at the bottom of your HTML document, or you can put it at the top and wrap the contents in a DOM-ready handler such as jQuery's $ function.
Knockout's declarative binding system provides a concise and powerful way to link data to the UI. It's generally easy and obvious to bind to simple data properties or to use a single binding.
A data binding connects data from a custom element (the host element) to a property or attribute of an element in its local DOM (the child or target element).
Only a few attributes can be bound directly; try using attr - it will let you set any attribute on an element.
<img width="16px" height="16px" data-bind="attr:{src: imagePath}" /> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
