我是 knockout 的新手,我正在尝试摆脱 MVC ViewModel 绑定(bind)。
我有一个复杂的模型:
具有 2 个属性的 SearchStudentsModel
- 学生集合(学生子集)
- 学生总数
请注意,集合的长度不等于总数。
我需要实现一个搜索功能 Student 将拥有所有常规属性以及 IsActive 指示器。 我使用 ul 和 li 标签对细节进行数据绑定(bind)。
搜索屏幕应便于用户使用指示器(打开和关闭)标记事件标志,并且应立即将数据保存在数据库中。
我提到的所有例子都只讨论了一层模型。我有一个 SearchStudent 模型,其中有一组学生。
对于这个模型层次结构应该如何绑定(bind)?
最佳答案
我已经重构您的 jsFiddle。希望您现在可以更好地理解 knockoutJS。这不是您的整个页面/Knockout,但我认为通过这个片段您的问题可以解决。
标记:
<button id="searchEmployees" type="button" data-bind="click: search">Search</button>
<li data-bind="foreach: Employees">
ID: <span data-bind="text: Id"></span><br/>
Name: <span data-bind="text: Name"></span><br/>
Active: <span data-bind="click: ToggleActivation, text: IsActive"></span> <-- click<br/>
</li>
<span data-bind="text: Employees().length"></span> of
<span data-bind="text: AllEmployees().length"></span>
js/viewmodel
function Employee(id, name, isactive){
var self = this;
self.IsActive = ko.observable(isactive);
self.Id = ko.observable(id);
self.Name = ko.observable(name);
self.ToggleActivation = function () {
if(self.IsActive() === true)
self.IsActive(false);
else
self.IsActive(true);
};
}
var searchEmployeeViewModel = function () {
var self = this;
self.Employees = ko.observableArray([]);
self.AllEmployees = ko.observableArray([]);
self.search = function () {
//Ajax call to populate Employees - foreach on onsuccess
var employee1 = new Employee(2, "Jane Doe", true);
var employee2 = new Employee(3, "Kyle Doe", false);
var employee3 = new Employee(4, "Tyra Doe", false);
var employee = new Employee(1, "John Doe", true);
self.AllEmployees.push(employee);
self.AllEmployees.push(employee1);
self.AllEmployees.push(employee2);
self.AllEmployees.push(employee3);
self.Employees.push(employee);
}
}
$(document).ready(function () {
ko.applyBindings(new searchEmployeeViewModel());
});
或者您可以简单地使用 my jsFiddle如果你不喜欢在这里阅读我的代码;)
关于javascript - 如何为复杂模型 knockout 进行数据绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18223115/