knockoutjs：的foreach带过滤器

Question

结合我是新来Knockoutjs，我试图完成两件事情：

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

B.打印出$指数在每个李

下是否有可能得到在每个L1

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

D.我也会apprec与$索引键值黄昏时分，如果你知道更好的办法来解决，例如，而不是下面做，做别的事情（不改变我的视图模型）

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/

我做了什么：

1. 更新您的Knockout库。您链接的版本似乎不支持$索引。我链接了Knockout 3.0并修复了你的需求B.
2. 我改变了你的viewmodel来修复需求D.我使用了一个在你的foreach绑定中使用的可观察数组。 Observable数组可以直接传递到foreach，之前使用的对象不能直接传入。
3. 可观察数组充满了对象，它们有一个描述和一个值。我改变了你的数据以满足要求C：打印关键值。
4. 我创建了计算的observables，它只返回原始数组中的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 
});