我读过一对夫妇的教程和试了几个小时试图让这项工作。 我的目标是有被点击时，他们展开/折叠多个链接。 到目前为止，我有以下几点：
HTML：
<ul data-bind="foreach: items">
<a href="#" data-bind="click: $parent.toggle, text: $parent.linkLabel"></a>
<button data-bind="text: name, click: $parent.clickTask"></button>
<div data-bind="visible: $parent.expanded">
<input data-bind="value: name"></input>
</div>
</ul>
JS：
var viewModel = function() {
var self = this;
self.items = [{"name":"bruce","id":1},{"name":"greg","id":2}]
self.expanded = ko.observable(false);
self.linkLabel = ko.computed(function () {
return self.expanded() ? "collapse" : "expand";
}, self);
self.toggle = function (item) {
self.expanded(!self.expanded());
};
};
ko.applyBindings(new viewModel());
的jsfiddle这里
我现在明白，我有这就是为什么一切都展开/折叠父扩张状态。 我该如何获得每个项目跟踪它自己的展开/拼贴状态？
以及你正在创建一个single dependency参照所有观察到的parent是这里的问题。
所以，你需要为每个列表项独立的依赖和利用$data是指当前上下文。 所以这里招为每个列表项创建一个实例
视图：
<ul data-bind="foreach: items"> <a href="#" data-bind="click: toggle, text:linkLabel"></a>
<button data-bind="text:name"></button>
<div data-bind="visible:expanded">
<input data-bind="value:name"></input>
</div>
</ul>
视图模型：
function Sample(item) {
var self = this;
self.name = ko.observable(item.name);
self.id = ko.observable(item.id);
self.expanded = ko.observable(false);
self.toggle = function (item) {
self.expanded(!self.expanded());
};
self.linkLabel = ko.computed(function () {
return self.expanded() ? "collapse" : "expand";
}, self);
}
var viewModel = function () {
var self = this;
var json = [{
"name": "bruce",
"id": 1
}, {
"name": "greg",
"id": 2
}]
var data = ko.utils.arrayMap(json, function (item) {
return new Sample(item); // making things independent here
});
self.items = ko.observableArray(data);
};
ko.applyBindings(new viewModel());
工作样本起来这里
我只是解决一些非常相似，我认为有一种方法来解决，不添加任何逻辑来的ViewModels。
下面的代码适用于一个表，其中的每一行进行扩展：
<tbody data-bind="foreach: payments">
<tr style="cursor: pointer" data-toggle="collapse" data-bind="attr: {'data-target': '#row' + $index()}">
<td>Column 1 content</td>
</tr>
<tr data-bind="attr: {id: 'row' + $index()}" class="collapse">
<td>
Detail....
</td>
</tr>
</tbody>
它使用2倍的ATTR结合，一旦定义生成的细节行的id，并且一旦设定崩溃肘节的数据目标 。
您的例子可以通过以下方式进行修改，你会不会需要“扩大”可观察的。
<ul data-bind="foreach: items">
<a href="#" data-toggle="collapse" data-bind="attr: {'data-target': '#row' + $index()}"></a>
<button data-bind="text:name"></button>
<div data-bind="attr: {id: 'row' + $index()}" class="collapse">
<input data-bind="value:name"></input>
</div>
</ul>
