Question

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

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

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

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隐藏和显示特定的数组元素

1 个答案: