KnockoutJS -如何隐藏某些元素内部foreach使用可观察数组?

Question

我有一个网站所有者列表。我试图建立一个UI，这将显示更多的信息关于业主当我点击他们。

this.toExpand = ko.observableArray(); //initialize an observable array
this.invertExpand = ko.observable("");

this.invertExpand = function (index) {
if (self.invertExpand[index] == false) {
self.invertExpand[index] = true;
alert(self.invertExpand[index]); //testing whether the value changed
}
else {
self.invertExpand[index] = false;
alert(self.invertExpand[index]); //testing whether the value changed
}

};

下面是HTML代码:

<div data-bind="foreach: WebsiteOwners">
<div>
<button data-bind="click: $root.invertExpand.bind(this,$index())" class="label label-default">>Click to Expand</button>
</div>
<div data-bind="visible: $root.toExpand()[$index]">


Primary Owner: <span data-bind="text:primaryOwner"></span>
Website Name : <span data-bind="text:websiteName"></span>
//...additional information
</div>
</div>

Answer 1

你可以将你的WebsiteOwner项直接存储在你的observable中。不需要使用索引

不要忘记你是通过不带参数的调用来读取一个可观察对象的(例如self.invertExpand())，你是通过带值的调用(例如self.invertExpand(true))来写入它的

我在这个回答中包含了3个例子:

• 只允许使用knockout打开单个细节
• 允许使用knockout独立打开和关闭所有细节的选项
• 不使用knockout，而是使用普通HTML代替🙂

1。手风琴

下面是一个支持单个展开元素的列表示例:

const websiteOwners = [
{ name: "Jane", role: "Admin" },
{ name: "Sarah", role: "Employee" },
{ name: "Hank", role: "Employee" }
];
const selectedOwner = ko.observable(null);
const isSelected = owner => selectedOwner() === owner;
const toggleSelect = owner => {
selectedOwner(
isSelected(owner) ? null : owner
);
}
ko.applyBindings({ websiteOwners, isSelected, toggleSelect });

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<ul data-bind="foreach: { data: websiteOwners, as: 'owner' }">
<li>
<span data-bind="text: name"></span>
<button data-bind="
click: toggleSelect,
text: isSelected(owner) ? 'collapse' : 'expand'"></button>

<div data-bind="
visible: isSelected(owner),
text: role"></div>
</li>
</ul>

2。独立的

如果你想让它们中的每一个都能够独立地展开/折叠，我建议将这种状态添加到所有者视图模型中:

const websiteOwners = [
{ name: "Jane", role: "Admin" },
{ name: "Sarah", role: "Employee" },
{ name: "Hank", role: "Employee" }
];
const OwnerVM = owner => ({
...owner,
isSelected: ko.observable(null),
toggleSelect: self => self.isSelected(!self.isSelected())
});

ko.applyBindings({ websiteOwners: websiteOwners.map(OwnerVM) });

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<ul data-bind="foreach: websiteOwners">
<li>
<span data-bind="text: name"></span>
<button data-bind="
click: toggleSelect,
text: isSelected() ? 'collapse' : 'expand'"></button>

<div data-bind="
visible: isSelected,
text: role"></div>
</li>
</ul>

3。利用<details>

这个利用了<details>元素的力量。它可能更容易访问，也更容易实现!

const websiteOwners = [
{ name: "Jane", role: "Admin" },
{ name: "Sarah", role: "Employee" },
{ name: "Hank", role: "Employee" }
];
ko.applyBindings({ websiteOwners });

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<ul data-bind="foreach: websiteOwners">
<li>
<details>
<summary data-bind="text: name"></summary>
<div data-bind="text: role"></div>
</details>
</li>
</ul>