javascript - backbone.js:同一进程的不同输出

Question

完成 Addy Osmani's backbone.js tutorial 的 setElement 部分.

他举了这个例子:

// We create two DOM elements representing buttons
// which could easily be containers or something else
var button1 = $('<button></button>');
var button2 = $('<button></button>');

// Define a new view
var View = Backbone.View.extend({
      events: {
        click: function(e) {
          console.log(view.el === e.target);
        }
      }
    });

// Create a new instance of the view, applying it
// to button1
var view = new View({el: button1});

// Apply the view to button2 using setElement
view.setElement(button2);

button1.trigger('click'); 
button2.trigger('click'); 

但是，他没有解释为什么 button1.trigger('click'); 与 button2.trigger('click'); 的输出不同-- 可能是一个愚蠢的问题，我知道这些是将 View 附加到按钮元素的不同方式，但为什么 button2.trigger('click'); 也返回 true?

Answer 1

button1.trigger('click'); 不应从该代码中产生任何输出。

setElement相当简单:

setElement view.setElement(element)

If you'd like to apply a Backbone view to a different DOM element, use setElement, which will also create the cached $el reference and move the view's delegated events from the old element to the new one.

所以 view.setElement(e) 做了四件事:

1. 解除 View 的事件与view.el的绑定(bind)。
2. 设置view.el = e。
3. 设置view.$el = Backbone.$(e)。
4. 将 View 的事件绑定(bind)到新的view.el。

结果是，将不再监听来自 button1 的事件，而 view 将监听来自 button2 的事件。

更全面的示例可能会有所帮助，因此让我们附加一些更多的点击事件处理程序:

var button1 = $('<button id="button1"></button>').click(function() {
    console.log('button1 jQuery', this);
});
var button2 = $('<button id="button2"></button>').click(function() {
    console.log('button2 jQuery', this);
});

var View = Backbone.View.extend({
    events: {
        click: function(e) {
            console.log('Backbone ', view.el, view.el === e.target);
        }
    }
});

var view = new View({el: button1});
view.setElement(button2);

button1.trigger('click'); 
button2.trigger('click'); 

演示:http://jsfiddle.net/ambiguous/S7A9z/

这应该在控制台中给你类似这样的东西:

button1 jQuery <button id=​"button1">​</button>​
button2 jQuery <button id=​"button2">​</button>​
Backbone <button id=​"button2">​</button>​ true

两个原始 jQuery 事件处理程序都将按预期触发，但我们只能通过 Backbone 获取 button2 事件，因为 setElement 调用发生在 trigger 调用。

那么为什么view.el === e.target是真的呢？好吧，您点击的是 button2，因此 e.target 将是 button2 和 view.setElement(button2) > 调用替换了 view.el，因此 Backbone click 处理程序中的 this.el 也将是 button2。