knockout.context

by joemcbride

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.2.1.debug.js"></script>
<script id="setTmpl" type="text/html">
    <ul data-bind="templateRowList: { name: 'itemTmpl', foreach: rows, click: 'deleteRow' }"></ul>
</script>

<script id="itemTmpl" type="text/html">
    <li>
        <a href="#" data-bind="text: name"></a>
    </li>
</script>

<div data-bind="template: { name: 'setTmpl', foreach: sets }"></div>

JavaScript

ko.bindingHandlers.templateRowList = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        //call real template binding's update
        ko.bindingHandlers.template.update(element, valueAccessor, allBindingsAccessor, viewModel);
        var options = valueAccessor();
        var value = ko.utils.unwrapObservable(options.foreach); //creates the dependency
        $(element).children('li').children('a').each(function(index, item) {

            $(item).click(function() {
                viewModel[options.click](value[index]);
            });
        });
    }
};

var row = function(name) {
    this.name = name;
}

var set = function() {
    this.rows = ko.observableArray([new row('row 1')]);
    this.deleteRow = function(item) {
        this.rows.remove(item);
    };
}

var viewModel = {
    sets: ko.observableArray([new set(), new set()])
}

ko.applyBindings(viewModel);