如何进行复杂模型剔除的数据绑定

how to do data-bind for complex model knockout

本文关键字：数据绑定 模型 何进行 复杂      更新时间：2023-09-26

我是一个新手，我正试图摆脱MVC ViewModel绑定。

我有一个复杂的模型：

SearchStudentsModel具有两个属性

  1. 学生集合（学生子集）
  2. 学生总数

请注意，集合的长度并不等于总数。

我需要实现搜索功能学生将拥有所有常规属性和IsActive指示符。我使用ul和li标签来对细节进行数据绑定。

搜索屏幕应便于用户用指示器（打开和关闭）标记活动标志，并应立即将数据保存在数据库中。

我提到的所有例子都只涉及一个级别的模型。我有一个SearchStudent模型，其中我有一组学生。

这种模型层次结构的绑定应该如何？

我已经重构了您的jsFiddle。希望你现在能更好地理解knockoutJS。这不是你的整个页面/淘汰，但我认为有了这个片段，你的问题就可以解决。

标记：

<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> &lt;-- 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());
});

如果您不喜欢在这里阅读我的代码，也可以简单地使用我的jsFiddle；）

相关文章：