Javascript 使用backbone.js单击模型后，模型似乎会堆积起来

这个问题对我来说很难解释，但我会尽力的

当用户单击

UserView

时，它使用相同的模型来显示更详细的

ProfileView

如果用户单击多个

UserView

，然后决定单击每个

ProfileView

上的聊天按钮。将输出用户在中单击的每个模型

假设我点击了3个配置文件，然后我点击聊天按钮，它会将这个输出到控制台

"start chat with >" model1
"start chat with >" model2
"start chat with >" model3

我只想要上次单击的用户

有人能向我解释为什么这些模型会堆积起来吗？

下面是您可能需要的代码。 UserView，它表示集合中的每个模型

var UserView = Backbone.View.extend({
    tagName: 'li',
    className: 'user',
    template: $('#tUser').html(),
    events: {
        'click' : 'clicked'
    },

    initialize: function() {
        this.render();
    },

    render: function() {
        var user = _.template(this.template, this.model.toJSON());
        //this.el.html(user);
        var show = this.$el.html(user); 
        $('#users').append(show);
        return this;
    },

    clicked: function() {
        new ProfileView({model: this.model});
    }
});

如您所见，我在单击UserView时设置了一个click事件，然后它使用当前模型实例化ProfileView

var ProfileView = Backbone.View.extend({
    el: '#profiles',
    template: $('#tProfile').html(),

    events: {
        'click .chat' : 'startChat'
    },

    initialize: function() {
        _.bindAll(this, 'render');
        console.log('profile', this.model.toJSON());
        this.render();
    },

    render: function() {
        var user = this.model.toJSON();
        var profile = _.template(this.template, this.model.toJSON());
        var show = this.$el.html(profile);
        return this;
    },

    startChat: function() {
        console.log("start chat with", this.model.toJSON());
    }
});

---

我想我看到了问题所在。每次用户单击配置文件时，都会创建一个新的

配置文件视图

，创建视图时会将一个新视图绑定到

单击

事件。然后，当用户单击聊天按钮时，这三个按钮都在渲染

不过，这似乎有些奇怪，因为通常单击事件的范围是绑定到它们的视图

我要做的第一件事是在

UserView

中保留对

ProfileView

的引用，并在每次调用

UserView时将其归零。单击

如果您可以在JSFIDLE中重新编程，我可以帮助您解决它。因为模板被省略了，所以很难发现这里的问题

编辑：谢谢你张贴小提琴。我能解决问题，我帮你解决了

正如我所怀疑的，这个问题与范围有关，因为单击事件的行为并不像我预期的那样。您正在将

el

手动设置为

。正如我最近了解到的那样，这是不推荐的。每个新的

ProfileView

都会绑定到此

el

中的单击事件，因此当您创建更多僵尸视图（它们挂在后台）时，它们都会响应这个范围过广的单击事件

以下是代码的更新部分：

var ProfileView = Backbone.View.extend({
    // deleted el property
    render: function() {
        var anchor = $('#profiles');
        anchor.html("");
        var profile = _.template(this.template, this.model);
        this.$el.html(profile);
        anchor.append(this.$el.html(profile));
        return this;
    }

});

这不是解决问题的最优雅的方法，但它可以完成任务。首先，我删除了

el

的手动设置器。相反，我在

render

方法中选择并清除了

#profiles

div。主干网创建自己的

el

，在本例中，它只是一个

div

。然后我将其附加到锚元素

---

虽然眼前的问题已经解决，但可能还有其他一些问题将在以后出现。您反复创建的那些视图可能会挂起，这将在以后导致内存泄漏。不过，你已经有了一个好的开始

除非您计划在任何给定时间在屏幕上显示多个纵断面图，否则您应该将纵断面图转换为单个纵断面图

用户视图首先检查是否有指定的配置文件，如果有，只需更新模型：

var UserView = Backbone.View.extend({
    tagName: 'li',
    className: 'user',
    template: $('#tUser').html(),
    events: {
        'click' : 'clicked'
    },

    initialize: function() {
        this.render();
    },

    render: function() {
        var user = _.template(this.template, this.model.toJSON());
        //this.el.html(user);
        var show = this.$el.html(user); 
        $('#users').append(show);
        return this;
    },

    clicked: function() {
        if (this.profileView){
            this.profileView.unrender();
            this.profileView.model = this.model;
        } else {
            this.profileView = new ProfileView({model: this.model});
        }
        this.profileView.render();
    }
});

ProfileView在实例化时不再呈现：

var ProfileView = Backbone.View.extend({
    el: '#profiles',
    template: $('#tProfile').html(),

    events: {
        'click .chat' : 'startChat'
    },

    initialize: function() {
        _.bindAll(this, 'render');
        console.log('profile', this.model.toJSON());
    },

    render: function() {
        var user = this.model.toJSON();
        var profile = _.template(this.template, this.model.toJSON());
        var show = this.$el.html(profile);
        return this;
    },

    startChat: function() {
        console.log("start chat with", this.model.toJSON());
    }
});

---

这仍然给了我同样的问题，请查看我的，看看我使用控制台的意思。当我遇到同样的问题时，再次看了这个答案。我现在明白你在这里干什么了！我现在已经接受了这个正确的答案。谢谢：）