0

複数のタスクを追加できるフォームがあります。各タスクにはタイトルとオプションがあり、特定のオプションを 1 つ選択した場合は、1 つまたは複数のメモを追加できるテーブルを追加したいと考えています。私が理解できないのは、タスクのメモをその特定のタスクにバインドする方法と、各タスクの selectedOption をリッスンする方法です。ノックアウトを使うのはこれが初めてです。

<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>
4

1 に答える 1

1

各タスクに selectedOption プロパティと no​​tes プロパティを指定すると、それらの値は親タスクにバインドされます。

これを見てください（フィドル：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());
于 2013-10-27T21:31:36.700 に答える