KnockoutJsは、私は、サーバーから更新さobservableArray</em><em>と<em>のViewModel</em>を持ってdependentObservableアレイ

Question

をparamatized、その後、私はそのobservableArrayのフィルタにdiv要素の動的な数を定義することができるようにする必要があります。

これはスクラムボードの例です。サーバーから戻ってきた一連のストーリーを受け取ったとします。また、viewModel.stories（） observableArrayにを追加します。

私は、観察可能な配列内の各ストーリーのプロパティの様々な異なる値のためのテンプレート結合フィルタを持っていたいと思います。

のでitem.BoardStateは「バックログ」または「進行中」

ある

与えられた私は、私が「進行中」だけショーの話を

をparamatizeできることに依存し、観察したいです

残念ながら、それは動作しないと言います。任意の提案を大いに感謝します。

Answer 1

別の関数に渡してデフェを作成する各のfilterTypeためndentObservable：

function filterStories(stories, filterParameter) { 
    return ko.utils.arrayFilter(stories, function (item) { 
     console.log("Current Filter = " + filterParameter + "--- Current BoardState = " + item.BoardState); 
     return ((item.BoardState === filterParameter)); 
    }); 
} 

self.filterInProgress = ko.dependentObservale(function() { 
    return filterStories(self.stories(), "InProgress"); 
}); 

self.filterBacklog = ko.dependentObservale(function() { 
    return filterStories(self.stories(), "Backlog"); 
}); 

Answer 2

パラメータをView-Modelに移動し、カスタムバインディングを使用します。だからあなたはそれに問題はないでしょう。

生まれたこの例を見て、私はこの質問を私の大学とある程度話し合っています。

デモ - プレビューとhttp://jsbin.com/epojol/5

コード - http://jsbin.com/epojol/5/edit#javascript,html,live

カスタムデモからのバインディング：

ko.bindingHandlers.rangeVisible = { 
      update: function (element, valueAccessor, allBindings) { 
       var selectedValue = ko.utils.unwrapObservable(valueAccessor()); 
       var itemRange = allBindings().range; 

       if (selectedValue < itemRange.max && selectedValue >= itemRange.min) 
        $(element).show("slow"); 
       else 
        $(element).hide("slow"); 
      } 
     }; 

HTMLでバインディング：あなたは、常にフィルタを外に移動することができます

<div class="plan red" data-bind="rangeVisible: selected, range: {min: 0, max:10}"> 

Answer 3

私はこのようにそれを記述します。

ビュー：

<div data-bind="foreach: filterInProgress"> 
    <h1 data-bind="text: Id"></h1> 
</div> 

のViewModel：

var viewModel = { 

    stories: ko.observableArray(
     [ 
      { 
       'Id': 0, 
       'BoardState': 'In Progress' 
      }, 
      { 
       'Id': 1, 
       'BoardState': 'Backlog' 
      }, 
      { 
       'Id': 2, 
       'BoardState': 'In Progress' 
      }    
     ] 
    ) 
}; 

viewModel.filterInProgress = ko.computed(
    function() { 
     return ko.utils.arrayFilter(viewModel.stories(), function(item) { 
      return item.BoardState == 'In Progress'; 
     }); 
    } 
) 

ko.applyBindings(viewModel); 

EDIT：今ko.dependentObservableとして働きます（ko.com 2.0）