1

我有一个用户可以添加或删除项目的可观察数组。此外，我有一个文本输入，以及数组中每个元素的 DIV。当用户单击其中一个 DIV 时，我将“选定”类添加到 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">

因此，基本上每次选择其中一个 DIV 时，我都希望能够通过输入字段更新与所选 div 相关的可观察数组的内容参数。

4

1 回答 1

1

一种方法是创建一个 observable 来保存所选任务的索引值并相应地绑定您的输入：

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

您可以看到输入值绑定到任务数组中的值之一的内容。选定的类也绑定到条件中的可观察对象。

Then your model would look like this (I defaulted the selectedIndex value to 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));
    };
}

The selectTask function gets the new index based on where the user clicked and updates the observable. And all the DOM updating is taken care of for you after that.

Here's an example in jsFiddle: http://jsfiddle.net/MD35J/

于 2013-09-12T00:44:35.250 回答