Question

举个例子：

var ViewModel = function(data)
{
    this.users = ko.mapping.fromJS(data,
        {
            create: opts => new UserModel(opts.data),
        });
}


var UserModel = function(data)
{
    ko.mapping.fromJS(data, {}, this);

    this.remove = function(user)
    {
        $.ajax({
            type: 'DELETE',
            url: API+'user',
            data: ko.mapping.toJSON(this),
            contentType: 'application/json',
            context: this,
            success: function(data)
            {
                // How to remove from array?
                this.parent.users.remove(this); // ?
            },
        });
    };
}

<a href="javascript:void(0)" data-bind="click: remove">Remove</a>

有没有办法删除＆＃34;我自己＆＃34;当成功处理程序被调用时，我从数组中得到了什么？

或者是将remove方法移到父级的唯一方法，并将其绑定如下所示？

<a href="javascript:void(0)"
    data-bind="click: $parent.remove.bind($parent, $data)>Remove</a>

注意：我在这里查看了类似的问题，但无法找到能够在这个确切情况下给出明确答案的问题。当与ajax请求结合使用时（即它不应该被删除直到成功），是否可以完成，如果没有，应该如何完成？

Answer 1

不确定您是否已尝试此方法，但尝试将ViewModel传递给UserModel。它并不理想，但是如果没有通过users，你就无法在ajax call内获得ViewModel集合的引用。

var ViewModel = function(data)
{
    var self = this;
    this.users = ko.mapping.fromJS(data,
    {
        create: opts => new UserModel(opts.data, self),
    });
}

var UserModel = function(data, parentContext)
{
    ko.mapping.fromJS(data, {}, this);
    var self = this;

    this.remove = function(user)
    {
        $.ajax({
            type: 'DELETE',
            url: API+'user',
            data: ko.mapping.toJSON(this),
            contentType: 'application/json',
            context: this,
            success: function(data)
            {
                parentContext.users.remove(this);

                // or
                // parentContext.users.remove(self);                  

                // or 
                // parentContext.users.remove(function(user) 
                // { 
                //   return user.Id == self.Id;
                // }); 
            },
        });
    };
}

Answer 2

最简单的解决方案是将您的删除功能从UserModel移动到ViewModel，并将点击绑定更改为click: $parent.remove。当前项仍然会传递给函数，您也可以访问该集合。

jsFiddle-1
如果由于某种原因，删除函数必须在UserModel上，那么我可能会通过使用observable属性设置事件处理程序hack，并让父ViewModel订阅该属性上的通知。您必须调整ko.mapping创建函数以为每个UserModel添加订阅。

jsFIddle-2

从Knockout中的observableArray中删除self？

2 个答案: