Question

有一个数组并循环显示每个项目的复选框，并在每个项目下，有一些文本，默认只显示所有未选中复选框的项目。点击复选框后，显示此项目的内容，然后点击下一步将显示下一项目的内容。通常我们会在内容上有可见的attr，或者它是跨越所有，除非我们有一个特定的id或类名与所选项的id或类匹配，我们应该如何在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/

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

1 个答案: