適當的方式查看El

Question

我想創建兩個（或多個）視圖的情況下，每一個不同的EL屬性，必須通過Backbone.js的視圖的事件散列（而不是通過jQuery的）綁定到這些事件。

獲取事件觸發時，所有實例具有相同的el很簡單：

someView = Backbone.View.extend({ 
    el: '#someDiv', 

    events: { 
    'click': 'someFunction' 
    }, 

    someFunction: function(){ 
    //Do something here 
    } 
}); 

到目前爲止，如果我在initialize功能分配el，並設置events通常如下，事件不會觸發：

someView = Backbone.View.extend({ 
    events: { 
    'click': 'someFunction' 
    }, 

    initialize: function(options){ 
    this.el = options.el 
    }, 

    someFunction: function(){ 
    //Do something here 
    } 
}); 

我的第一反應是有el是返回感興趣的DOM元素的字符串表示的函數：

someView = Backbone.View.extend({ 
    el: function(){ 
    return '#someDiv-' + this.someNumber 
    }, 

    events: { 
    'click': 'someFunction' 
    }, 

    initialize: function(options){ 
    this.someNumber = options.someNumber 
    }, 

    someFunction: function(){ 
    //Do something here 
    } 
}); 

但是，如果我有 x實例化，則觸發someFunction x次。

接下來我試着在initialize同時設置el和events屬性：

someView = Backbone.View.extend({ 

    initialize: function(options){ 
    this.el = options.el 
    this.events = { 
     'click': 'someFunction' 
    } 
    }, 

    someFunction: function(){ 
    //Do something here 
    } 
}); 

但是這不會觸發事件。在這一點上，我非常喜歡釣魚。

有沒有人知道如何instantiate backbone.js視圖與el特定於該實例的事件只觸發該實例，而不是其他實例View？

Answer 1

你實際上並不需要經過所有「this.element」的東西。

骨幹自動設置視圖的「厄爾尼諾」的「厄爾尼諾」你傳入構造器作爲一個選項。

它是那麼可作爲「this.el」整個視圖。

這是所有你需要做的：

x = Backbone.View.extend({ 
    events: { 
     'click': 'say_hi' 
    }, 

    initialize: function(options){ 
     // Not actually needed unless you're doing something else in here 
    }, 

    say_hi: function(){ 
     alert(this.el.id); 
    } 

    }); 

y = new x({el: '#div-1'}); 
z = new x({el: '#div-2'}); 

z.say_hi(); 
y.say_hi(); 
​ 

看到這個活的jsfiddle：http://jsfiddle.net/edwardmsmith/QDFwf/15/

你的第二個例子不工作的原因是，與主幹的最新版本中，你不能只是設置直接的「el」。正如你注意到的那樣，這不正確地設置/更新事件。

不工作

initialize: function(options){ 
    this.el = options.el; 
} 

如果你想動態設置EL這樣，你需要使用View.setElement作爲適當的代表活動，並設置緩存this.$el。

作品

initialize: function(options){ 
    this.setElement(options.el) 
} 

你的第二個例子直播的jsfiddle：http://jsfiddle.net/edwardmsmith/5Ss5G/21/

但這僅僅是重新做的是已經在骨幹網罩下完成的。