knockout.js - knockoutjs 将嵌套数据推送到数组中

Question

我一直在盯着我尝试构建树视图一段时间，但似乎无法走上正确的轨道。

谁能告诉我我在哪里搞砸了？

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());

小提琴 http://jsfiddle.net/marsmania00/adcvs/4/

Answer 1

您尝试构建对象两次。首先在 中addReservation()，然后在过滤数组时在构造函数中。

如果您删除函数中的构造addReservation()函数调用，它可以正常工作。

修改版：http: //jsfiddle.net/MizardX/adcvs/6/