单击 w/Knockout JS 隐藏和显示特定数组元素

Question

在这个例子中，我们有一个有很多房间的房子，每个房间都有很多家具。我希望能够让用户能够切换每个房间家具的可见性（列表可能会很长）。

其中一个挑战是确保家具是否可见，仅针对他们单击按钮的每个房间。

这里有一个 fiddle 可以玩：http://jsfiddle.net/gztmq4p6/

我的尝试是，对于每个房间，都有一个可观察的布尔值来判断家具是否可见。它没有用，也没有给出任何错误：

HTML

  <tbody data-bind="foreach: rooms">
    <tr class="well">
        <td valign="top">
            <input type="text" data-bind='value: name' />
             // Added this
            <div> <button class="btn btn-xs btn-info" data-bind='click: toggleFurnitureVisibility'>Toggle Furniture Visibility</button>
                <button class="btn btn-xs btn-danger" data-bind='click: $root.removeRoom'>Remove Room</button>
            </div>
        </td>
        <td>
            // Added this
            <table data-bind="visible: areFurnituresVisible">
                <tbody data-bind="foreach: furnitures">
                    <tr>
                        <td>
                            <input type="text" data-bind='value: name' />
                        </td>
                        <td>
                            <input type="text" data-bind='value: size' />
                        </td>
                        <td>
                            <button class="btn btn-xs btn-danger" data-bind='click: $parent.removeFurniture'>Delete Furniture</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <button class="btn btn-success btn-xs" data-bind='click: addFurniture'>Add Furniture</button>

JavaScript

var Room = function(name, furnitures) {
    var self = this;
    // Default to true
    self.areFurnituresVisible = ko.observable(true);

   self.toggleFurnitureVisibility = function (room) {
        if (self.areFurnituresVisible) {
           self.areFurnituresVisible = ko.observable(false);
        } else {
           self.areFurnituresVisible = ko.observable(true);
        }
    };

};

Answer 1

如果你有可观察的：

this.o = ko.observable();

并且您想更新您需要使用语法的可观察值：

this.o(newValue);

你的情况是

self.areFurnituresVisible(!self.areFurnituresVisible());

见working fiddle

单击 w/Knockout JS 隐藏和显示特定数组元素

Hide and show specific array elements on click w/ Knockout JS

javascript

jquery

dom

knockout.js