Question

我有一个可观察的数组，用户可以添加或删除项目。另外，我有一个文本输入，以及数组中每个元素的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相关的可观察数组的内容参数。

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

您可以看到输入值绑定到tasks数组中某个值的内容。选定的类也绑定到条件中的observable。

然后你的模型看起来像这样（我将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函数根据用户点击的位置获取新索引并更新observable。之后所有的DOM更新都会为您完成。

以下是jsFiddle中的一个示例：http://jsfiddle.net/MD35J/

将文本输入绑定到可观察数组的值

1 个答案: