ノックアウトJSアイテムのリストを構築する

Question

私がやっているのは、利用可能なアイテムの他の大きなリストからアイテムのリストを構築することです（コンテキストはある種の製品の成分を指定すると思います）。私はノックアウトになるとまだかなり緑色で、私が現在使っている解決策が間違っていると思って何かが欠けているのだろうかと思っています。私はかなり標準的なテンプレートをいくつか持っており、ビューモデル上で2つの観測可能な配列に対してforeachバインディングを使用しています（1つは使用可能な成分のリスト用、もう1つは製品の選択成分のリスト用です）。

<div data-bind="template: {name:'ingredientTypeTemplate', foreach: ingredientTypes}"></div> 

<div data-bind="template: {name:'selectedIngredientTypeTemplate', foreach: selectedIngredientTypes}"></div> 

<script> 

var productTypeViewModel = { 

    ingredientTypes: ko.observableArray([]), 
    selectedIngredientTypes: ko.observableArray([]), 

    addIngredient: function() { 
     productTypeViewModel.ingredientTypes.remove(this); 
     productTypeViewModel.selectedIngredientTypes.push(this); 
    }, 

    removeIngredient: function() { 
     productTypeViewModel.selectedIngredientTypes.remove(this); 
     productTypeViewModel.ingredientTypes.push(this); 
    }, 
}; 

$(document).ready(function() { 

    $.getJSON("/IngredientType/Index") 
      .success(function (data) { 
       productTypeViewModel.ingredientTypes($.parseJSON(data)); 
      }) 
      .error(function() { alert("error"); }); 

    ko.applyBindings(productTypeViewModel); 
}); 

</script> 

<script type="text/x-jquery-tmpl" id="ingredientTypeTemplate"> 
    <div> 
     <span>${Name}</span> 
     <a href='#' data-bind="click: productTypeViewModel.addIngredient">Add</a> 
    </div> 
</script> 

これはノックアウトで何をしようとしているのですか？何かが間違っていると感じていますが、私は何が分かりません。私は、その上にadd関数を持った、ingredientTypeのための別個のVM定義を持っていました。このタイプのVMの配列を使用してobservableのingredientsTypesを初期化し、テンプレートはデータバインド "click：add"を使用しましたが、このVMからメインVMに通信する必要はありませんでしたクリックを処理します。

基本的には、私がやったことが標準的なアプローチであるか、これを行うためのより良い（よりノックアウトに適した）方法があるかどうかの兆候がほしいと思います。

Answer 1

あなたのアプローチは完全に有効で、私が他のノックアウトの例で見たことだと思います。たとえば、Ryan Niemeyerのdrag and drop pluginのv1から、次のコードスニペットが実行しているものと非常によく似ています。

if (position >= 0) { 
    originalParent.remove(item); 
    newParent.splice(position, 0, item); 
}