採用淘汰賽可觀測陣列

我試圖重新實現從Udacity的JavaScript設計模式課程的學生出勤例如數據綁定複選框。到目前爲止，我已經設法重新創建了表格，並正確地填充了一些學生數據，但是當我更改複選框值時，它並未在模型中更新。採用淘汰賽可觀測陣列

例如，當我在輸出顯示初始出勤數據，而不是對應的複選框的當前狀態在控制檯顯示

debugVM.studentList()[0].days();

。一個JSFiddle可以在這裏找到here。

的index.html

<table> 
    <thead> 
    <tr> 
     <th>Student</th> 
     <!-- ko foreach: attendance --> 
     <th data-bind="html: $data"></th> 
     <!-- /ko --> 
    </tr> 
    </thead> 
    <tbody data-bind="foreach: studentList"> 
    <tr> 
     <td data-bind="html: name, click: $parent.debugStudent"></td> 
     <!-- ko foreach: days --> 
     <td> 
     <input type="checkbox" data-bind="value: $data, checkedValue: $data, checked: $data" /> 
     </td> 
     <!-- /ko --> 
    </tr> 
    </tbody> 
</table>

app.js

var Student = function(student){ 

    this.name = ko.observable(student.name); 
    this.days = ko.observableArray(student.days); 
}; 


var ViewModel = function() { 
    var self = this; 

    this.attendance = ko.observableArray([1,2,3,4,5,6,7,8,9,10,11,12]); 
    this.studentList = ko.observableArray([]); 

    students.forEach(function(student) { 
    self.studentList.push(new Student(student)); 
    }); 

    self.debugStudent = function() { 
    console.log(self.studentList()[0].days()); 
    }; 
}; 
var debugVM = new ViewModel(); 

ko.applyBindings(debugVM);

來源

2015-05-09 blogscot

從敲除documentation

關鍵點：一個observableArray軌道哪些對象是在陣列中，不是這些物體的狀態

在你的情況，這意味着days應該是無法觀測陣，但可觀的陣列。

例如，你可以添加新的視圖模型Day：

var Day = function(isChecked) { 
    this.isChecked = ko.observable(isChecked); 
}

，並設置days屬性這樣

this.days = []; 
for (var i = 0; i< student.days.length; i++) { 
    this.days.push(new Day(student.days[i] == 1)); 
}

見working fiddle

來源

2015-05-09 07:15:09

採用淘汰賽可觀測陣列

回答

相關問題