Привязать ввод текста к значению наблюдаемого массива

Question

У меня есть наблюдаемый массив, который пользователь может добавить или удалить элементы. Кроме того, у меня есть один текстовый ввод и DIV для каждого элемента массива. Когда пользователь нажимает на один из DIV, я добавляю класс «selected» в DIV. Я хочу связать один вход с DIV, который имеет выбранный класс.

Нокаут:

self.tasks = ko.observableArray([]); 

self.addTask = function() { 
    self.tasks.push(
     { 
      id: "1", 
      content: "" 
     } 
    ); 
} 

HTML:

<div data-bind="foreach: tasks"> 
    <div class="wrapper" data-bind="text: content" class="selected"></div> 
    <div class="wrapper" data-bind="text: content"></div> 
    <div class="wrapper" data-bind="text: content"></div> 
</div> 
<label>Edit Task:</label> <input type="text" data-bind="value: content"> 

Так в основном каждый раз, когда один из DIVs выбран я хочу, чтобы иметь возможность обновленного параметра содержимого наблюдаемого массива, который относится к выбранный div, через поле ввода.

Answer 1

Одним из способов было бы создать наблюдаемую, что имеет значение индекса выбранной задачи и связать свой вклад соответственно:

<div data-bind="foreach: tasks"> 
    <div class="wrapper" data-bind="text: content, 
     click: $root.selectTask, 
     css: {'selected': $root.selectedIndex() === $index()}"> 
    </div> 
</div> 
<label>Edit Task:</label> 
<input type="text" data-bind="value: tasks()[selectedIndex()].content"> 

Вы можете видеть, что входное значение связано с содержанием от одного из значения в массиве задач. Выбранный класс также связан с наблюдаемым в условном выражении.

Тогда ваша модель будет выглядеть следующим образом (я по умолчанию значения SelectedIndex до 0):

function Model() { 
    var self = this; 
    this.tasks = ko.observableArray(); 
    this.addTask = function(id, content) { 
     self.tasks.push(
     { 
      id: ko.observable(id), 
      content: ko.observable(content) 
     }); 
    }; 
    this.selectedIndex = ko.observable(0); 
    this.selectTask = function(task) { 
     self.selectedIndex(self.tasks.indexOf(task)); 
    }; 
} 

Функция selectTask получает новый индекс, основанный на том, где пользователь нажал и обновляет наблюдаемые. И все обновления DOM заботятся о вас после этого.

Вот пример в jsFiddle: http://jsfiddle.net/MD35J/