Question

我要做的是从其他更大的可用项目列表中构建项目列表（对于上下文，请考虑指定某种类型的产品的成分）。当谈到Knockout时我仍然很绿，我想知道我是否遗漏了一些东西，因为我目前使用的解决方案感觉不对。我有几个相当标准的模板，我在视图模型上使用foreach绑定两个可观察数组（一个用于可用成分列表，另一个用于产品所选成分列表）。

<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做的最佳方式吗？虽然我不太确定是什么，但感觉有些不对劲。我确实为ingredientType有一个单独的VM定义，它有一个add函数。 ingredientTypes observable将使用这种类型的VM数组进行初始化，然后模板只使用数据绑定“click：add”，但我不喜欢必须通过这个来回传递给主VM。处理点击。

基本上我只想表明我所做的是标准方法还是有更好的（更适合Knockout）方式。

Answer 1

我认为你的方法完全有效，这也是我在其他淘汰赛例子中看到的。例如，从Ryan Niemeyer的drag and drop plugin v1中，你可以找到以下与你正在做的非常相似的代码片段：

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

Knockout JS构建项目列表

1 个答案: