knockoutjs：foreach 与过滤器的绑定

Question

我是 Knockoutjs 的新手，我正在尝试完成两件事：

A.如果 ul#TrueList 为空或 ul#FalseList 相应地为空，则隐藏/删除 #TrueListSection 或 #FalseListSection

B.在每个 li 中打印出 $index

C.是否可以在每个 li 中使用 $index 获取键值

<li>0 - hasCar</li>
<li>2 - hasTruck</li>

D.如果您知道更好的解决方法，我也将不胜感激，例如，不要在下面做，而是做其他事情（不改变我的视图模型）

foreach: [data.hasCar, data.HasPlain, data.hasTruck, data.Bike]

这是我的视图模型

var ViewModel = function() {
    var self = this;
    this.data = {
        hasCar: true,
        hasPlain: false,
        hasTruck: true,
        hasBike: false
    };
};

这是我的 HTML：

<div id="TrueListSection">
    <h2><b>Has</b></h2>
    <ul id="TrueList" data-bind="foreach: [data.hasCar, data.HasPlain, data.hasTruck, data.Bike]">
        <!-- ko if: $data -->
        <li data-bind="text: $index"></li>
        <!-- /ko -->
    </ul>
</div>
<hr/>
<div id="FalseListSection">
    <h2><b>Does Not Have</b></h2>
    <ul id="FalseList" data-bind="foreach: [data.hasCar, data.HasPlain, data.hasTruck, data.Bike]">
        <!-- ko ifnot: $data -->
        <li data-bind="text: $index"></li>
        <!-- /ko -->
    </ul>
</div>

它当前抛出以下错误：

Uncaught Error: Unable to parse bindings.
Message: ReferenceError: $index is not defined;
Bindings value: text: $index 

这是我的 JSFiddle：http://jsfiddle.net/tuJtF/3/

非常感谢您。

Answer 1

我认为您提供了错误的 Fiddle :) 无论如何，我使用了您帖子中的代码并对其进行了编辑，它现在可以满足您的需求（我认为）：

http://jsfiddle.net/tuJtF/2/

我做了什么：

1. 更新您的 Knockout 库。您链接的版本似乎不支持 $index。我链接了 Knockout 3.0 并解决了您的要求 B。
2. 我更改了您的视图模型以修复需求 D。我使用了一个可观察的数组，该数组现在用于您的 foreach 绑定。 Observable 数组可以直接传递到 foreach 中，而你之前使用的对象不能直接传入。
3. observable 数组充满了对象，这些对象具有描述和值。我以这种方式更改了您的数据以满足要求 C：打印键值。
4. 我创建了计算的 observable，它返回的 observable 数组仅包含原始数组中的真值或假值。这样做是为了满足要求 A（我可以只检查相应数组的长度以了解该部分是否应该可见）并且还可以使您的绑定代码更清晰。

相关变化：

// Changed the structuring of your data to use observable arrays and include the description property so you can bind against it
this.data = ko.observableArray([
    { description: 'hasCar', value: true },
    { description: 'hasPlain', value: false },
    { description: 'hasTruck', value: true },
    { description: 'hasBike', value: false }
]);

// Made two computed observables so you can separate the true from the false values more easily.
this.trueData = ko.computed({
    read: function () {
        return ko.utils.arrayFilter(this.data(), function (item) {
            return item.value === true;
        });
    },
    owner: this
});

this.falseData = ko.computed({
    read: function () {
        return ko.utils.arrayFilter(this.data(), function (item) {
            return item.value === false;
        });
    },
    owner: this
});