templates - 单击在主干中调用函数两次

Question

我创建了在主干 View 上触发两次警报的非常快速的示例。

http://jsfiddle.net/feronovak/8svqX/

这没有什么特别的，它确实是让我了解如何正确调用单独的 View ，因此它们不会触发以前的单击方法。现在我生成两个 View ，第二个 View 覆盖#boxSearch 中的表单。当我单击“搜索”按钮时，它还会生成警报 doSearch SearchLocation。我原本期望只看到警报 doSearch SearchLatitude。我做错了什么？

var Geo = {
    Views: {},
    Templates: {}
};

Geo.Templates.SearchLocation = _.template( $("#tpl-search-location").html());
Geo.Templates.SearchLatitude = _.template( $("#tpl-search-latitude").html());

Geo.Views.SearchLocation = Backbone.View.extend({
    initialize: function() {
        this.render();
    },
    el: $("#boxSearch"),
    template: Geo.Templates.SearchLocation,
    render: function() 
    {
        $(this.el).html(this.template);
    },
    events: {
        "click input[type=button]": "doSearch"
    },
    doSearch: function(e) {
        e.preventDefault();
        alert('doSearch SearchLocation');
    }
});

Geo.Views.SearchLatitude = Backbone.View.extend({
    initialize: function() {
        this.render();
    },
    el: $("#boxSearch"),
    template: Geo.Templates.SearchLatitude,
    render: function() 
    {
        $(this.el).html(this.template);
    },
    events: {
        "click input[type=button]": "doSearch"
    },
    doSearch: function(e) {
        e.preventDefault();
        alert('doSearch SearchLatitude');
    }
});

$(document).ready(function(e) {
    var searchLocation = new Geo.Views.SearchLocation();
    var searchLatitude = new Geo.Views.SearchLatitude();
});

Answer 1

这是 Backbone 应用程序中经常出现的“重影 View ”问题:

• 将 View 附加到 DOM 元素
• 您将另一个 View 附加到同一个 DOM 元素
• 您在 DOM 元素上触发一个事件(或者更糟糕的是，在两个 View 都会监听的其他地方触发一个事件)
• 这两个 View 都会触发其事件处理程序，通常会造成严重破坏。

正如 @machineghost 指出的，您的代码中没有任何内容可以解除第一个 View 的绑定(bind)，因此两个 View 都附加到 #boxSearch，并且两个 View 都会响应 click 事件。有几种方法可以解决这个问题:

• 您可以在事件处理程序中调用 e.stopPropagation() ( docs )(我认为这就是您尝试使用 e.preventDefault( ))。这将防止事件在触发后冒泡，因此最后定义的 View 将捕获它。这可行，但请注意，您仍然有两个 View ，并且过时的幽灵 View 可能会产生其他副作用。

• 您可以让每个 View 呈现自己的 DOM 元素，并使用类 .boxSearch，然后对您没有的 View 调用 view.remove()不再想要。这可能是最干净的选项，但这意味着动态创建大部分 DOM，这比用 HTML 编码更昂贵且难以管理。

• 您可以为每个 View 指定一个清理方法，例如.clear() 或 .exit()，可以调用 view.undelegateEvents() 和 view.stopListening().然后确保在完成 View 后调用此方法。

如果您小心确保它被调用并确保它清除需要清除的所有内容，那么它会很好地工作。