MVC 淘汰赛.js答案

【问题标题】：MVC Knockout.jsMVC 淘汰赛.js
【发布时间】：2014-04-09 11:26:12
【问题描述】：

我可以借助此链接创建动态表单

var viewModel = {
    users : ko.observableArray(),
    addUser : function () {
        this.users.push({
            name : ko.observable(),
            choicestring : ko.observable()
        });
    }
};

viewModel.addUser();

ko.applyBindings(viewModel);

我的问题是我不知道如何删除我添加的控件，我将如何使用 Knockout.js 来做到这一点

感谢和问候

【问题讨论】：

你能提供更多细节吗？您打开了一个带有 2 个输入字段的表单，想要单击“保存”按钮（将新用户添加到 users 数组）然后想要表单消失？
嗨 infadelic，在这组代码中我可以添加新控件，现在我想在单击旁边的删除按钮时从数组中删除一个控件。

标签： model-view-controller knockout.js

【解决方案1】：

Knockout 的 observable 数组有一个 .remove(item) 函数可以为您执行此操作。所以你可以把它添加到你的视图模型中：

removeUser : function ( user ) {
    this.users.remove( user );
}

然后像这样连接起来：

<ul data-bind="foreach: users">
    <li>
        <span data-bind="text: name"></span>
        (<a href="#" data-bind="click: function () { $parent.removeUser( $data ); }">Remove</a>)
    </li>
</ul>
<button data-bind="click: addUser">Add user</button>

Jsfiddle 示例：http://jsfiddle.net/8zR5u/

【讨论】：

【解决方案2】：

通常是这样的（对 webapi 有效，对 MVC 也是如此）：

self.remove = function (product) {
        // First remove from the server, then from the view-model.
        $.ajax({ type: "DELETE", url: baseUri + '/' + product.Id })
            .done(function () { self.products.remove(product); });
    }

【讨论】：