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.
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}" />