阻止多个模型和视图相互更新答案

【问题标题】：Stopping multiple models and views from updating each other阻止多个模型和视图相互更新
【发布时间】：2019-08-03 22:30:33
【问题描述】：

我在更新另一个视图时遇到了问题。我有两个不同的视图，它们具有独立的 HTML 结构，它们似乎相互交互。我猜测视图或模型都处于隐藏状态，尽管大多数交互都是 listenTo 事件。有什么想法吗？

我有两个视图，createContact 和 editContact，它们都存在于模型 Contact 中。当您添加新联系人然后编辑任何其他联系人时，就会出现此问题。如果联系人是从前一个会话创建的，则没有更新问题，只有在 createContact 视图保存新联系人之后。创建后，每个通过 editContact 的附加更新请求都会添加一个新的网络请求。例如，如果我添加一个联系人，然后编辑另一个联系人，我会看到两个网络请求，一个用于当前联系人 ID，另一个用于更新后的联系人。如果我然后进入另一个联系人进行编辑，它将添加第三个网络请求，然后尝试从以前的添加/更新中覆盖其他联系人 ID。

我最初意识到我一遍又一遍地添加新视图，这会导致冗余问题。我删除了 .append() 情况，甚至在保存时删除了模型。我不确定为什么这会保留以前的视图/模型。

我添加了一个 ID 为 869452a845b472c4621778ef61047b53 的新联系人（我们称之为联系人 3），然后我编辑了 ID 为 869452a845b472c4621778ef61047425 的联系人 2。使用单个 post 请求和单个 put 请求都可以正常工作，一切似乎都可以正常工作。在编辑最终联系人时，联系人 1 的 ID 为 869452a845b472c4621778ef61047af5，我开始收到重复的请求。为了方便参考：

联系人 3 - 发布 - ID：869452a845b472c4621778ef61047b53 联系人 2 - PUT - ID：869452a845b472c4621778ef61047425 联系人 1 - PUT - ID：869452a845b472c4621778ef61047af5

这在我的 createContact 视图的保存函数中。相同的概念在 editContact 视图中完成，只是类名略有不同（为了额外的预防措施）：

    this.model.set({
        names:[{
            familyName: this.$('.name-family').val(),
            givenName: this.$('.name-given').val(),
            honorificPrefix:"",
            honorificSuffix: this.$('.name-suffix').val(),
            middleName:""
        }],
        favorite: this.$( '.isFavorited' ).hasClass('zmdi-star'),
        share: this.$( '.isShared' ).hasClass('zmdi-check-square'),
        organizations: orgArray,
        phoneNumbers: phoneArray,
        addresses: addressArray,
        urls: [],
        imClients: [],
        emailAddresses: emailArray,
        events: [],
        notes: this.$("textarea[name='notes']").val() !== '' ? [this.$("textarea[name='notes']").val()] : []
    });

    App.Contacts2.add(this.model);

    this.model.save(null ,{
        method: 'POST',
        success: function () {
            App.Emitter.trigger('snackbar', 'Contact Saved!', 3000);
            App.Master.changeView('contacts');
            App.Contacts2.remove(this.model);

        },
        error: function () {
            console.info('contact save error');
            App.Contacts2.remove(this.model);
        }
    });

【问题讨论】：

标签： javascript jquery model-view-controller backbone.js

【解决方案1】：

在我看来，您的回调中可能有错误的this（通常默认为window），因为您没有绑定任何内容。因此this.model (=window.model) 可能是undefined。这就是为什么你没有真正删除任何东西。

我的建议：

使用下划线的bind()：

this.model.save(null ,{
    method: 'POST',
    success: _.bind(function () {
        App.Emitter.trigger('snackbar', 'Contact Saved!', 3000);
        App.Master.changeView('contacts');
        App.Contacts2.remove(this.model);

    }, this),
    error: _.bind(function () {
        console.info('contact save error');
        App.Contacts2.remove(this.model);
    }, this),
});

或

this.model.save(null ,{
    method: 'POST',
    success: function () {
        App.Emitter.trigger('snackbar', 'Contact Saved!', 3000);
        App.Master.changeView('contacts');
    },
    error: function () {
        console.info('contact save error');
    },
    complete: _.bind(function () {
        App.Contacts2.remove(this.model);
    }, this),
});

使用辅助变量self：

var self = this;
this.model.save(null ,{
    method: 'POST',
    success: function () {
        App.Emitter.trigger('snackbar', 'Contact Saved!', 3000);
        App.Master.changeView('contacts');
        App.Contacts2.remove(this.model);

    },
    error: function () {
        console.info('contact save error');
        App.Contacts2.remove(this.model);
    }
});

备注

我不太了解你的代码，所以我不知道在 changeView 之前还是之后删除模型是否重要。
另外，也许您忘记在某个地方删除带有this.model.off() 和this.model.stopListening() 的事件挂钩/侦听器？

【讨论】：

【解决方案2】：

非常感谢您的帮助。最后，问题实际上是（虽然我没有发布支持这个的代码）只是一堆视图被添加到模型中而没有被删除。离开视图时只需一个简单的 .remove() 即可使一切正常工作。谢谢！

【讨论】：