knockout.js - Knockoutjs 循环数组每个复选框控件自己的内容隐藏或显示？

Question

有一个数组并循环它以显示每个项目的复选框，并且在每个项目下，有一些文本，默认只显示所有未选中复选框的项目。单击复选框后，显示该项目的内容，然后单击下一步将显示下一个项目的内容。通常我们会在 content 或 上看到 attr ，但它是交叉的，除非我们有一个特定的 id 或 class 名称与所选项目的 id 或 class 匹配，我们应该如何在 Knockoutjs 中做到这一点？

Answer 1

您描述的功能听起来像是行详细信息类型的功能。为了提供这一点，每个项目都需要能够指定自己的值，以指示该项目的详细信息是否可见。

这是我的意思的一个例子：

下面的 HTML 显示了一个列表，并且对于数组中的每个项目，都包含一个“标题”和“详细信息”部分：

<ul data-bind="foreach: items">
    <li>
        <label><span  data-bind="text:header"></span> <input type="checkbox" data-bind="checked: isDetailsVisible" />
        </label>
        <div data-bind="visible: isDetailsVisible">
            <span  data-bind="text:details"></span>
        </div>
    </li>
</ul>

下面的视图模型创建了两个 Item 条目，每个条目都提供 isDetailsVisible 属性：

var Item = function(header, details){
    self = this;
    self.header = ko.observable(header);
    self.details = ko.observable(details);
    self.isDetailsVisible = ko.observable(false);
}

var vm = {
    items: ko.observableArray([
        new Item("Apple", "makes great pies"),
        new Item("Grape", "frequently used in wine-making")
        ])
};

ko.applyBindings(vm);

这是一个演示的小提琴：http: //jsfiddle.net/blugrasmaniac/fhRNV/