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 
});