Question

我目前正在使用API和Backbone.js。

我有两个视图，都渲染到同一个文档元素#viewContainer。这两个视图都会呈现一个带有几个字符串的表来描述它们，还有一个按钮可以在一个模态中打开一个表单。

查看1

App.Views.TaskList = Backbone.View.extend({
    el: "#viewContainer",
    tagName: 'tr',
    events: {
        "click button": "showTaskForm"
    },
    showTaskForm: function (event) {
        event.preventDefault();
        var id = $(event.currentTarget).data("id");
        var item = this.collection.get(id);
        var formView = new App.Views.Form({
            model: item
        });
        formView.render();
    },
    render: function () {
        changeActive($('#tasksLink'));
        var template = _.template($("#taskList").html(), {});
        $('#viewContainer').html(template);
        // loop and render individual tasks.
        this.collection.each(function (model) {
            var variables = {
                name: model.get('name'),
                button: model.getButton()
            };
            var template = _.template($("#task").html(), variables);
            $("#taskTable tbody").append(template);
        });
    },
    collection: App.Collections.Tasks,
});

查看2

App.Views.ProcessList = Backbone.View.extend({
    el: "#viewContainer",
    tagName: 'tr',
    events: {
        "click button": "showStartForm"
    },
    showStartForm: function (event) {
        event.preventDefault();
        var id = $(event.currentTarget).data("id");
        var item = this.collection.get(id);
        var formView = new App.Views.Form({
            model: item
        });
        formView.render();
    },
    collection: App.Collections.Processes,
    render: function () {
        changeActive($('#processLink'));
        var template = _.template($("#processList").html(), {});
        $('#viewContainer').html(template);
        this.collection.each(function (model) {
            var variables = {
                processId: model.get('id'),
                processName: model.get('name'),
                button: model.getButton()
            };
            var template = _.template($('#process').html(), variables);
            $('#processList tbody').append(template);
        });
    } });

默认情况下，这些视图都不会呈现，两者都需要通过页面上的按钮激活，并且在DOM中相互覆盖。但是，首先呈现哪个视图，该视图中按钮的单击事件是始终触发的按钮事件。

如果我需要更多信息，请告诉我，我会编辑问题。

Answer 1

请务必在第一个视图中调用undelegateEvents()。

Answer 2

由于您正在侦听相同元素上的事件，实际上您在同一个按钮上附加了两个用于单击事件的侦听器，当您更改视图时，您不会清理这些侦听器。

这篇文章讨论了如何管理有关视图更改的事件，这应该对您有所帮助。

http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

Answer 3

正如其他海报所指出的那样，你需要注意“僵尸”的观点（即确保你取消发布事件）。如果你正在构建一个中等复杂的应用程序，你会想要一些可以扩展的东西。我发现这种模式很有用：

var BaseView = Backbone.View.extend({
    render: function () {
      this.$el.html(this.template());
      return this;
    },
    close: function () {
      if (this.onClose) this.onClose();

      this.undelegateEvents();
      this.$el.off();
      this.$el.remove();
    }
});

然后，无论何时构建视图，您都可以：

var view = BaseView.extend({
   //your code
   //now the .close() method is available whenever you need to close
   //a view (no more zombies!).
});

Backbone.js触发其他视图的事件

查看1

查看2

3 个答案: