循环数组每个复选框控制自己的内容隐藏或显示

Question

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

Answer 1

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

下面是我的意思的一个例子:

下面的HTML显示了一个列表，对于数组中的每个项目，包含一个"header"one_answers"details"部分:

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