knockout binding context updating issue
by stofte
HTML
<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
<script id="button-add-data" type="text/html">
isObservable: <span data-bind="text: ko.isObservable($data)"></span><br>
toJSON: <span data-bind="text: ko.toJSON($data)"></span><br>
<input type="button" data-bind="attachments: $data" value="doesnt update">
</script>
<script id="button-add-prop" type="text/html">
isObservable: <span data-bind="text: ko.isObservable(attachments)"></span><br>
toJSON: <span data-bind="text: ko.toJSON(attachments)"></span><br>
<input type="button" data-bind="attachments: attachments" value="updates">
</script>
<div data-bind="template: {name: 'button-add-data', data: attachments}"></div>
<div data-bind="template: {name: 'button-add-prop', data: $data}"></div>
CSS
html { padding: 10px; }
div { margin: 5px; border: 1px solid green }
JavaScript
var i = 0;
ko.bindingHandlers.attachments = {
init: function(element, valueAccessor) {
var files = valueAccessor();
$(element).click(function() {
files.push(i++);
});
}
};
var list = ko.observableArray();
var model= {
attachments: list
};
ko.applyBindings(model);