正确的方法来动态分配backbone.js查看el

Question

我想创建两个(或更多)视图实例,每个视图实例具有不同的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
  }
});

但这不会触发事件.在这一点上,我几乎都在钓鱼.

有没有人知道如何实例化一个具有el特定于该实例的backbone.js视图,该实例具有仅触发该实例的事件,而不是其他实例View？

Answer 1

你实际上并不需要经历所有那些"this.element"的东西.

Backbone会自动将视图的"el"设置为您传递给构造函数的"el"作为选项.

然后在整个视图中以"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,因为它正确地委托事件并设置缓存的这个.$ el.

作品

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

你的第二个例子的现场jsFiddle:http://jsfiddle.net/edwardmsmith/5Ss5G/21/

但这只是重做Backbone中已经完成的工作.