как выполнить привязку данных для сложной модели нокаута

Question

Я новичок в нокауте, я пытаюсь перейти от привязки MVC ViewModel.

У меня есть сложная модель:

SearchStudentsModel, который имеет 2 свойство

1. Коллекции студентов (подмножество студентов)
2. Количества студентов в целом

Обратите внимание, что длина коллекции не равно числу в целом.

Мне нужно реализовать функцию поиска Студент будет иметь все обычные свойства плюс индикатор IsActive. Я использую теги ul и li для привязки данных к деталям.

Экран поиска должен облегчить пользователю пометить активный флаг индикатором (вкл. И выкл.) И немедленно сохранить данные в базе данных.

Все примеры, о которых я говорил, относятся только к одному уровню модели. У меня есть модель SearchStudent, и в ней есть коллекция учеников.

Как должна быть привязка к этой иерархии моделей?

Answer 1

У меня есть refactored ваш jsFiddle. Надеюсь, теперь вы сможете лучше понять нокаут. Это не вся ваша страница/нокаут, но я думаю, что с этим фрагмент может возникнуть ваша проблема может быть решена.

разметка:

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

или вы можете просто использоватьmy jsFiddle, если вы не любите читать мой код здесь;)