私はしばらくの間ツリービューを構築しようとしているのを見つめていましたが、正しい軌道に乗ることができないようです.
誰か私がどこで失敗したか手がかりを教えてもらえますか?
HTML
<ul data-bind="foreach: reservations">
    <li><span data-bind="text: name "></span>   
        <ul data-bind="foreach: studios">
            <li><span data-bind="text: name "></span>
                <ul data-bind="foreach: times">
                    <li>T:<span data-bind="text: name "></span></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
JS
function Date(d) {
    var self = this;
    self.name = ko.observable(d.name)
    self.studios = ko.observableArray(ko.utils.arrayMap(d.studios, function(s){
        return new Studio(s);
    }));
}
function Studio(d) {   
    var self = this;
    self.name= ko.observable(d.name);
    self.times= ko.observableArray(ko.utils.arrayMap(d.times, function(i){
        return new Time(i);
    }));
}
function Time(d) {
    var self = this;
    self.id = ko.observable(d.id);
    self.name = ko.observable(d.name);    
}
function ViewModel(data) {
    var self = this;
    self.reservations = ko.observableArray();
    self.addReservation = function() {
        self.reservations.push(
            new Date({
                name: '22-12-2012',
                studios: [new Studio({
                                name: 'Studio 1',
                                times: [new Time({
                                            id: 's1_20',
                                            name: '20 uur' })]                                            
                        })]
            })
        );
    }
}
ko.applyBindings(new ViewModel());