ノックアウトで選択したオブジェクトパターン

Question

knockoutJSで次のパターンを達成する方法を知っている人はいますか？ 私はいつもこのパターンをApacheのフレックスで使用し、私がそれを模倣できるかどうかを見たいと思っています。 私は観察可能なものを別のものに置き換える方法がわかりません。どんな助け/思考も大変に感謝しています。

//モデル

myViewModel = { 
items : ko.observableArray(), 
selected_item : ko.observable() 
} 

//ビュー

<h3 data-bind="text : myViewModel.selected_item.name"> </h3> 
<ul> 
<!-- ko foreach: myViewModel.items --> 
<li data-bind="text : name"/> 
<!-- /ko --> 
</ul> 

//ロジック

$('li').click(function(e){ 
    //check ko.dataFor(this) has different id from that of myViewModel.selected_item 
    //if id different 
    //set myViewModel.selected_item to ko.dataFor(this) 
    //rejoice as h3 text changes 
}) 

Answer 1

あなたは正しい軌道に乗っています。選択した項目を選択するために使用できるパターンがいくつかあります。上記のように、クリックハンドラを邪魔にならないように取り付ける場合は、delegatedハンドラを使用することをお勧めします。そうすれば、observableArrayの変更を処理するように設定されます。デリゲートされたハンドラは、追加される新しい要素を処理できます。

だから、あなたのような何かを行うことができます：ここで

$("#content").on("click", "li", function(e) { 
    var item = ko.dataFor(this), 
     current = myViewModel.selected_item; 

    if (!current() || item.id !== current().id) { 
     current(item); 
    } 
}); 

をサンプルです：http://jsfiddle.net/rniemeyer/hBUBN/

あなたh3にバインドすると、selected_itemがNULLとなる可能性があるので、あなたはそれをラップすることにより、自分自身を守るために必要があるだろうwithブロック（この例）では、nullを処理する関数を呼び出すか、（data-bind="text: myViewModel.selected_item() ? myViewModel.selected_item().id : 'unknown'"）のようなバインディングでそれを実行します。これをきれいに保つために、このロジックを関数に入れることができ、データバインドから関数を呼び出すか、withを使用すると、問題が発生しないようにすることができます（ただし、nullの場合は何も表示されません）。

そうでなければ、あなたも、ちょうどこの操作を行うことができます。

<!-- ko foreach: myViewModel.items --> 
    <li data-bind="text : name, click: $parent.selected_item"></li> 
<!-- /ko --> 

はKO 2.0に結合click（およびevent）は、最初の引数として現在のデータを渡します。 $parent変数を使用して、1つのスコープ・レベル・アップ（またはベース・レベルに達するには$root）にアクセスできます。 Observablesは関数で、新しい値を最初の引数として渡して値を設定します。したがって、ここで$parent.selected_itemを実行すると、データを最初の引数として渡すobservable関数が呼び出されます。したがって、選択した値が適切な項目に設定されます。

サンプル：http://jsfiddle.net/rniemeyer/gemug/