Question

我是Knockoutjs的新手，我正在努力完成两件事：

一个。如果ul＃TrueList为空或ul＃FalseList相应为空，则隐藏/删除#TrueListSection或#FalseListSection

B中。打印每个li中的$ index

℃。是否有可能在每个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

我认为你提供了错误的小提琴:)无论如何，我使用了你的帖子中的代码进行了编辑，它现在做你想要的（我认为）：

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

我做了什么：

更新您的Knockout库。您链接的版本似乎不支持$ index。我链接了Knockout 3.0并修复了你的要求B.
我更改了你的viewmodel来修复需求D.我使用了一个可在你的foreach绑定中使用的可观察数组。可观察数组可以直接传递给foreach，而之前使用的对象不能直接传入。
可观察数组充满了具有描述和值的对象。我改变了你的数据以满足要求C：打印键值。
我创建了计算的observable，它返回可观察数组，只包含原始数组中的true或false值。这样做是为了满足要求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
});

knockoutjs：foreach与过滤器绑定

1 个答案: