私はしばらくの間ツリービューを構築しようとしているのを見つめていましたが、正しい軌道に乗ることができないようです.
誰か私がどこで失敗したか手がかりを教えてもらえますか?
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());