knockoutjs将嵌套数据推入数组

Question

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

任何人都可以给我一个线索，我搞砸了吗？

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

FIDDLE http://jsfiddle.net/marsmania00/adcvs/4/

Answer 1

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

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

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