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');的输出不同 - 可能是一个愚蠢的问题，我知道这些是将视图附加到按钮的不同方式元素，但为什么button2.trigger('click');也会返回true？

Answer 1

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

setElement非常简单：

setElement view.setElement(element)

如果您想将Backbone视图应用于其他DOM元素，请使用 setElement ，这也将创建缓存的$el引用并从旧视图移动视图的委派事件元素到新的。

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

从events取消绑定视图的view.el。
设置view.el = e。
设置view.$el = Backbone.$(e)。
将视图的events绑定到新的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，因此this.el位于Backbone click内button2 1}}处理程序也将是{{1}}。

backbone.js：同一进程的不同输出

1 个答案: