0

私がやろうとしているのは、利用可能なアイテムの他の大きなリストからアイテムのリストを作成することです (コンテキストについては、ある種の製品の成分を指定することを考えてください)。Knockout に関しては、私はまだかなり未熟で、現在使用しているソリューションが間違っていると感じているため、何か不足しているのではないかと考えています。私はかなり標準的なテンプレートをいくつか持っており、ビュー モデルの 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>

Knockout でやろうとしていることを行うには、これが最善の方法ですか? よくわかりませんが、何かがおかしいと感じます。私は、追加機能を備えた、infiniteType の別の VM 定義を持っていました。componentTypes オブザーバブルは、このタイプの VM の配列で初期化され、テンプレートはデータ バインド「クリック: 追加」を使用しましたが、この VM からメインの VM に通信する必要がありませんでした。クリックを処理します。

基本的に、私が行ったことが標準的なアプローチであるか、それともより優れた (よりノックアウトに適した) 方法があるかを示したいと思います。

4

1 に答える 1

1

あなたのアプローチは完全に有効であり、他のノックアウトの例で見たものだと思います. たとえば、Ryan Niemeyer のドラッグ アンド ドロップ プラグインの v1 から、実行していることと非常によく似た次のコード スニペットを見つけることができます。

if (position >= 0) {
    originalParent.remove(item);
    newParent.splice(position, 0, item);
}
于 2012-05-14T13:49:16.737 に答える