动态分配Backbone.js的查看El有道(proper way to dynamically a

我想创建两个（或多个）视图的情况下，每一个不同的EL属性，必须通过Backbone.js的视图的事件散列（而不是通过jQuery的）绑定到这些事件。

获取事件触发时，所有实例具有相同的el很简单：

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

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

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

到目前为止，如果我给你el的initialize功能，并设置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
  }
});

然而，这会触发someFunction x次，如果我有X实例someView 。

接下来，我试图同时设置el和events的属性initialize ：

someView = Backbone.View.extend({

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

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

但是这不会触发事件。 在这一点上，我非常钓鱼。

有谁知道如何实例化一个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/

你的第二个例子不工作的原因是，与主干的最新版本，你不能只是设置“厄尔尼诺”直接了。 这不，因为你注意到没有，正确设置/更新事件。

不工作

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

如果你想动态设置EL这样，你需要使用View.setElement作为适当的代表活动，并设置缓存的这一点。$埃尔 。

作品

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

住在你的第二个例子中的jsfiddle： http://jsfiddle.net/edwardmsmith/5Ss5G/21/

但是这仅仅是重新做的是已经在骨干网罩下完成的。

文章来源: proper way to dynamically assign backbone.js view el