Форматы привязки нокаута foreach

Question

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

<fieldset data-bind="foreach: tasks"> 
    Title:<input type="text" data-bind="value: title"/> 
    Option: <select data-bind="options: $root.option, optionsCaption: 'Select', value: selectedOption"></select> 

    <table> 
     <tbody data-bind="foreach: notes "> 
      <tr> 
       <td><input type="text" data-bind="value: note"/></td> 
      </tr>  
     </tbody> 
    </table> 
    <button data-bind="click: addRow">Add note</button> 
</fieldset> 
<button data-bind="click: addTask">Add task</button> 

Answer 1

Если вы дадите каждой задаче свойство selectedOption и свойство notes, их значения будут привязаны к их родительской задаче.

Посмотрите на это (скрипка: http://jsfiddle.net/jRyS7/2/):

var Note = function(note){ 
    var self = this; 
    self.note = ko.observable(note); 
} 

var Task = function(title, notes){ 
    var self = this; 
    self.title = ko.observable(title); 
    self.selectedOption = ko.observable(); 
    self.notes = ko.observableArray(); 
    for (var i = 0; i< notes.length; i++){ 
     self.notes.push(new Note(notes[i])); 
    } 
    self.addRow = function(){ 
     self.notes.push(new Note("newNote")); 
    } 
} 

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

    self.option = [ 
     "option1", 
     "option2" 
     ] 

    self.tasks = ko.observableArray([ 
     new Task("task1", ["note1.1", "note1.2"]), 
     new Task("task2", ["note2.1", "note2.2"]), 
     new Task("task3", ["note3.1", "note3.2"]) 
    ]) 

    self.addTask = function(){ 
     self.tasks.push(new Task("newTask", ["newNote1", "newNote2"])); 
    } 

} 

     ko.applyBindings(new VM());