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>

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

JavaScript

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

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

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

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




ko.applyBindings(new vm());