html - knockoutjs 获取满足条件的项目数

Question

我有一个 View 模型，其中有一个可观察数组，里面有一个可观察数组。我想跟踪用户何时从他们的列表中勾选项目。我有以下 View 模型和 html:

var mydata = {
        Incomplete: ko.computed(function () {
           // return the count of items that are not IsActive
        }),
        Categories: ko.observable([
              {
                  Description: "Dairy", ListItems: ko.observableArray([
                  { Description: "Eggs", Quantity: "1 Dz.", IsActive: ko.observable(false) },
                   { Description: "Milk", Quantity: "1 Gallon", IsActive: ko.observable(false) }
                  ])
              },
              {
                  Description: "Produce", ListItems: ko.observableArray([
                      { Description: "Lettuce", Quantity: "1 Head", IsActive: ko.observable(false) },
                      { Description: "Oranges", Quantity: "5 ea.", IsActive: ko.observable(false) },
                      { Description: "Greenbeans", Quantity: "1 Thingy", IsActive: ko.observable(false) },
                  ])
              },
        ])
    };

<div data-bind="foreach: Categories" id="list-items">
            <h3 data-bind="text: Description" id="list-heading"></h3>
            <ul data-bind="foreach: ListItems">
                <li>
                    <div class="title">
                        <input type="checkbox" data-bind="checked: IsActive"/>
                        <input type="text" data-bind="value: Quantity, disable: IsActive" class="input-readonly" readonly />
                        <input type="text" data-bind="value: Description, disable: IsActive" class="input-readonly" readonly />
                    </div>
                </li>
            </ul>
        </div>
        <div >
            <span data-bind="text: Incomplete"></span>
            <span >Items left in your list</span>
        </div>

Answer 1

使用您当前的代码，您可能希望循环遍历类别，然后为每个类别循环遍历各个项目。这是一种可能的实现方式:

Incomplete: ko.computed(function () {
    var count = 0;
    ko.utils.arrayForEach(mydata.Categories(), function(category) {
        ko.utils.arrayForEach(category.ListItems(), function(item) {
             if (!item.IsActive()) {
                  count++;
             }
        });
    });

    return count;
}),