Question

我有一个创建列表的主视图。此视图有一个“加载更多项目”的点击事件我有两个子视图扩展主视图我的问题是，当我点击一个视图“加载更多”按钮时，它会影响另一个视图（如果之前加载）。我知道我必须在初始化另一个之前关闭视图，但由于我的视图正在扩展主视图，因此该方法不起作用（它关闭主对象，而其他子视图不会初始化）：

Backbone.View.prototype.close = function(){
  this.remove();
  this.unbind();
}

我的主要观点：

App.Views.List = Backbone.View.extend({
    events: {
        'click .load-btn' : 'loadMore'
    },
    loadMore: function(e)
    {
        this.collection.increase().fetch({
            add: true
        });
        e.preventDefault();
    }  
}

请注意.increase是一种增加api参数的自定义方法。

儿童观点：

App.Views.Projects = App.Views.List.extend({
    initialize: function()
    {
        this.itemView = App.Views.Project;
        this.collection = new App.Collections.Projects();
        this.parent('initialize');
    },
    render: function()
    {
        this.template = _.template(App.Tpl.get('projects.list'));
        this.parent('render');
    }
});

请注意.parent是一种调用主视图方法的自定义方法因此，当我在视图中单击load-more按钮时，如果已经初始化，它会尝试在从主视图扩展的所有视图上调用loadMore方法。

我该怎么办？

Answer 1

App.Views.Projects扩展App.Views.List并且不定义事件，因此它从父视图继承。这意味着项目视图中的所有.load-btn元素都设置了处理程序。

也许你可以通过在项目视图中添加一个空事件哈希来解决这个问题，即

App.Views.Projects = App.Views.List.extend({
  events: {},
  initialize: function()
  ...
});

Answer 2

使用e.stopPropagation（）而不是防止默认值。这帮助我解决了类似的问题。

如何防止backbone.js跨视图子进程共享事件

2 个答案: