Nested Query Editor

http://stackoverflow.com/questions/7426844/knockoutjs-not-applying-beforeremove-and-afteradd-on-nested-templates

by bmh_ca

HTML

<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<div data-bind="template: {foreach: sections, name: templateName, beforeRemove: brCallable}"></div>


<div style="color: #EEE; margin-top: 55px">
    <h6>Templates</h6>
<div type="text/html" id="yearTemplate">
    <p>Year: <span data-bind='text: $data.year'></span></p>
</div>

<div type="text/html" id="monthTemplate">
    <p>Month: <span data-bind='text: $data.month'></span></p>
</div>
</div>

JavaScript

var viewModel = {
    sections: ko.observableArray([
        {
        'year': 1911,
        templateName: ko.observable('yearTemplate'),
        },
    {
        'month': 'December',
        templateName: ko.observable('monthTemplate'),
        }
    ]),
    templateName: function(item) {
        return item.templateName();
    },
    brCallable: function() {
        console.log(arguments)
    },
}

ko.applyBindings(viewModel);
console.log("-------");
viewModel.sections.shift();