backbone.js - 动态分配backbone.js View el的正确方法

Question

我想创建两个(或更多) View 实例，每个实例具有不同的 el 属性，并通过backbone.js View 的事件哈希(而不是通过 jQuery)将事件绑定(bind)到它们。

当所有实例都具有相同的 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 次，如果我有 someView 的 x 个实例化.

接下来我尝试设置 el和 events initialize 中的属性:

someView = Backbone.View.extend({

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

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

但这不会触发事件。在这一点上，我几乎钓鱼。

有谁知道如何用 el 实例化一个backbone.js View ？特定于该实例，该实例具有仅针对该实例触发的事件，而不是 View 的其他实例?

Answer 1

你实际上并不需要经历所有“this.element”的东西。

Backbone 自动将 View 的“el”设置为作为选项传递给构造函数的“el”。

然后在整个 View 中以“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/

您的第二个示例不起作用的原因是，使用最新版本的 Backbone，您不能再直接设置“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/

但这只是重新做 Backbone 中已经在做的事情。