Knockout.js:使用过滤器绑定foreach

用户名

我是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/

提前非常感谢您。

汉斯·罗丹克(Hans Roerdinkholder)

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

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

我做了什么:

  1. 更新您的淘汰赛库。您链接的版本似乎不支持$ index。我链接了Knockout 3.0,从而解决了您的要求B。
  2. 我更改了视图模型以解决要求D。我现在使用了可观察数组,该数组现在在您的foreach绑定中使用。可观察的数组可以直接传递到foreach中,以前使用的对象无法直接传递到其中。
  3. 可观察数组填充有具有描述和值的对象。我以符合要求C的方式更改了您的数据:打印键值。
  4. 我创建了可计算的可观察变量,这些观察变量只返回原始数组中的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
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Knockout.Js数组过滤器语法

来自分类Dev

使用foreach Knockout绑定更新列表项

来自分类Dev

Knockout.js安全绑定

来自分类Dev

在Knockout js中删除绑定

来自分类Dev

Knockout.js单击绑定异常行为

来自分类Dev

使用过滤器限制-instafeed.js

来自分类Dev

Knockout.js绑定范围

来自分类Dev

哪些Knockout.js绑定是“双向”的?

来自分类Dev

Knockout.js中的Bootstrap DatePicker绑定

来自分类Dev

使用Knockout Js进行Ajax数据绑定

来自分类Dev

使用过滤器代替foreach

来自分类Dev

带有Knockout.js绑定的问题

来自分类Dev

Knockout.js数据绑定到ViewModel

来自分类Dev

Knockout.js if / shim绑定

来自分类Dev

Knockout.js:使用过滤器进行foreach绑定

来自分类Dev

MVC与Knockout.js

来自分类Dev

更改Knockout.js绑定

来自分类Dev

样式绑定中的Knockout.js图像

来自分类Dev

我如何使用foreach和SignalR防止子div被Knockout JS绑定

来自分类Dev

使用jQuery的Knockout.js数据绑定

来自分类Dev

绑定Knockout.js网格

来自分类Dev

Knockout.js单击绑定异常行为

来自分类Dev

使用过滤器限制-instafeed.js

来自分类Dev

<html>中的Knockout.js绑定

来自分类Dev

使用 Knockout JS 搜索嵌套 json 数组的过滤器

来自分类Dev

使用knockout.js 过滤器绑定的问题

来自分类Dev

基于knockout foreach索引绑定类

来自分类Dev

Knockout.js foreach 错误

来自分类Dev

在 Knockout.js 中异步应用绑定