时间戳

首页 > 解决方案 > 阻止多个模型和视图相互更新

javascript - 阻止多个模型和视图相互更新

问题描述

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

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

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

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

联系人 3 - POST - 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);
        }
    });

标签： javascriptjquerymodel-view-controllerbackbone.js

解决方案

在我看来，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之前或之后删除模型是否重要。
  • 另外，也许您忘记在某个地方使用 and 删除事件挂钩/侦听this.model.off()器this.model.stopListening()？

推荐阅读