knockout - 計算された関数でテンプレートデータを使用する方法

Question

目的は、可能な状態ごとにフィルタリングされた項目リストを表示することです。そのようなリストは多くの場所で表示する必要があるかもしれないので、私はテンプレートを試しています。テンプレートはfilterItemsを呼び出して、そのアイテムの特定のリストを取得します。

以下のfilterItemsコードは、viewModel（current_filter）のフィールドを使用しているので、すべてのリストは同じ項目を持ちます（3と8は準備完了状態です）:(それは考えていません。これは正しいフィルター値が含まれています。filterItems機能が利用できる。このフィルタ値を作成する方法はありますか？

<script> 
var viewModel = { 
items: ko.observableArray(
    [ 
     { "iid": 1, "state": "entered" }, 
     { "iid": 3, "state": "ready" }, 
     { "iid": 4, "state": "delivered" }, 
     { "iid": 8, "state": "ready" }, 
     { "iid": 13, "state": "entered" } 
    ]), 
states: ko.observableArray(
    [ 
     { "sid": 1, "filter": "entered", "color": "yellow" }, 
     { "sid": 2, "filter": "ready", "color": "red" }, 
     { "sid": 3, "filter": "delivered", "color": "blue" } 
    ]), 
current_filter: 'ready' 
} 
viewModel.filterItems = ko.computed(function() { 
var filtered_items = []; 
for (var i = 0; i < viewModel.items().length; ++i) 
    if(viewModel.items()[i].state == viewModel.current_filter) 
    filtered_items.push(viewModel.items()[i]); 
return filtered_items; 
}, viewModel); 
</script> 

<div data-bind="foreach: states"> 
    <div data-bind="template: {name: 'state', data: $data}"></div> 
    <script type="text/html" id="state"> 
<h2 data-bind="text: filter"></h2> 
<ul data-bind="foreach:viewModel.filterItems()"> 
    <li> 
    <div data-bind="text: iid"></div> 
    </li> 
</ul> 
    </script> 
</div> 
<script>ko.applyBindings(viewModel);</script> 

jsFiddle https://jsfiddle.net/mthrock/kxpfdfva/8/#&togetherjs=JKJOos6VJc

Answer 1

でどのように

下記の代わりにテンプレートの構成要素についてはどうですか？ 実行スニペット の

ko.components.register('mycomponent', { 
 
    viewModel: function(params) { 
 
    var self = this; 
 
    this.items = ko.observableArray(
 
     [{ 
 
     "iid": 1, 
 
     "state": "entered" 
 
     }, { 
 
     "iid": 3, 
 
     "state": "ready" 
 
     }, { 
 
     "iid": 4, 
 
     "state": "delivered" 
 
     }, { 
 
     "iid": 8, 
 
     "state": "ready" 
 
     }, { 
 
     "iid": 13, 
 
     "state": "entered" 
 
     }]); 
 
    this.filter = params.filter; 
 

 
    this.filterItems = ko.computed(function() { 
 
     var filtered_items = []; 
 
     for (var i = 0; i < this.items().length; ++i) 
 
     if (this.items()[i].state == this.filter) 
 
      filtered_items.push(this.items()[i]); 
 
     return filtered_items; 
 
    }, this); 
 

 

 
    }, 
 
    template: ' <h2 data-bind="text: filter"></h2>\ 
 
    <ul data-bind="foreach:filterItems()">\ 
 
    <li>\ 
 
     <div data-bind="text: iid"></div>\ 
 
    </li>\ 
 
    </ul>' 
 
}); 
 

 

 

 

 
function model() { 
 
    var self = this; 
 
    this.states = ko.observableArray(
 
    [{ 
 
     "sid": 1, 
 
     "filter": "entered", 
 
     "color": "yellow" 
 
    }, { 
 
     "sid": 2, 
 
     "filter": "ready", 
 
     "color": "red" 
 
    }, { 
 
     "sid": 3, 
 
     "filter": "delivered", 
 
     "color": "blue" 
 
    }]); 
 

 
} 
 

 
var mymodel = new model(); 
 

 
$(document).ready(function() { 
 
    ko.applyBindings(mymodel); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div data-bind="foreach: states"> 
 
    <mycomponent params="filter: filter"></mycomponent> 
 
</div>