Recursive template displaying help

https://groups.google.com/d/topic/knockoutjs/YR_y4zrhrQM/discussion

by kyrisu

HTML

<script src="http://knockoutjs.com/js/jquery.tmpl.js"></script>
<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-1.2.1.js"></script>
<table>
    <tr data-bind='template: { name: "display-breadcrumbs", foreach: currentBreadcrumbs }'>
    </tr>
</table>

<div data-bind="text: 'Debug:' + ko.toJSON(viewModel)"></div>

<script id="display-breadcrumbs" type='text/html'>
    <td>
        <h3 data-bind="click: panelClicked">${name}/</h3>
    </td>
</script>

JavaScript

var panel = function(name, parent) {
    this.name = name;
    this.parent = parent;
};

panel.prototype = {
    panelClicked: function() {
        alert(this.name);
    }
};

function vm() {
    // data
    var self = this;
    var navigation = {};
    navigation.search = new panel('Search');
    navigation.results = new panel('Results', navigation.search);
    navigation.details = new panel('Details', navigation.results);
    
    var currentPanel = ko.observable(navigation.details);

    var currentBreadcrumbs = ko.dependentObservable(function() {
        var result = [],
            current = currentPanel();
        while (current) {
            result.unshift(current);
            current = current.parent;
        }
        return result;
    },this);
};

var viewModel = new vm();
ko.applyBindings(viewModel);