使用Knockout.js计数数组中的实例

Count Instances in Array with Knockout.js

本文关键字：实例 数组 数数 Knockout js 使用      更新时间：2023-09-26

我刚刚开始使用Knockout.Js，为了实现我认为是基本的东西，我有点吃力。最烦人的是试图获取可观察数组中字符串的唯一实例数，并打印到ui。

具体来说，我有一个酒店模型，每个酒店都有一个"hotelType"字段。这将是"B&"B"或"全包"等。我设法获得了这些酒店类型的唯一列表，显示为复选框，并将它们绑定回observableArray。然后，此数组用于筛选显示的酒店列表。然而，我不能做的是提供阵列中每个类别类型的计数（即50家酒店、40家B&B等）。

我想到的唯一方法是从Compute中构建新字段，并使用arrayFilter来获取筛选后的数组的长度。这将是相当昂贵和混乱的。

有没有更简单的方法？

根据您的描述，我建议采用不同的方法。我建议将hotelType从字符串升级为应用程序的适当部分。例如，您可以将其设置为位于hotel和$root（或酒店列表）之间的ViewModel。从本质上讲，您的酒店列表将变成一个基于hotelType的分组列表。

下面的JSON显示了我所说的结构：

var data = {
    allHotels : [{
          hotelType : "B&B",
          hotels : [{name: "West Inn", chosen: false}, 
                    {name: "East Inn", chosen: true}]
        },{
          hotelType : "All-inclusive",
          hotels : [{name: "North Inn", chosen: false}, 
                    {name: "Center Inn", chosen: false}, 
                    {name: "South Inn", chosen: false}]
    }]};

这将使统计每种类型的酒店数量变得非常容易。在你看来是这样的：

<ul data-bind="foreach: allHotels">
    <li>
        <span data-bind="text: hotelType"></span>
        (<span data-bind="text: hotels().length"></span>)
        ...foreach: hotels here...
    </li>
</ul>

看看这个jsfiddle，看看我的建议。

酒店的总数也很容易：酒店类型的所有总数的总和。如果从相关集合中删除/添加了某个项目，则会在需要时更新总数。

相关文章：