动态分配backbone.js视图el的正确方法 [英] proper way to dynamically assign backbone.js view el

问题描述

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

I would like to create two ( or more ) view instances, each with different el attributes, and have events bound to them via backbone.js view's events hash ( not through jQuery ).

在所有实例化具有相同的el 时触发事件很容易:

Getting events to trigger when all instantiations have the same el is easy:

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

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

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

到目前为止，如果我在initialize函数中赋值el，并正常设置events如下，事件不会触发:>

So far, if I assign el in the initialize function, and set events normally as follows, events do not trigger:

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

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

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

我的第一直觉是让 el 成为一个返回感兴趣的 dom 元素的字符串表示的函数:

My first instinct was to have el be a function that returns the string representation of the dom element of interest:

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 个 someView 实例，这会触发 someFunction x 次.

However, this triggers someFunction x times if I have x instantiations of someView.

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

Next I tried setting both the el and events attributes in initialize:

someView = Backbone.View.extend({

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

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

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

but this does not trigger events. At this point I'm pretty much fishing.

有谁知道如何使用特定于该实例的 el 实例化一个backbone.js 视图，该实例的事件仅触发该实例，而不是 View?

Does anyone know how instantiate a backbone.js view with an el specific to that instance that has events that only trigger for that instance, and not other instances of the View?

推荐答案

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

You don't actually need to go through all that "this.element" stuff.

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

Backbone automatically sets the view's "el" to the "el" you pass into the constructor as an option.

然后在整个视图中都可以作为this.el"使用.

It is then available as "this.el" throughout the view.

这就是你需要做的:

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/

See this live jsFiddle: http://jsfiddle.net/edwardmsmith/QDFwf/15/

您的第二个示例不起作用的原因是使用最新版本的 Backbone，您不能再直接设置el".正如您所注意到的，这不会正确设置/更新事件.

The reason your second example did not work is that with the latest versions of Backbone, you cannot just set the "el" directly any more. This does not, as you noticed, properly set/update events.

不起作用

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

如果您想以这种方式动态设置 el，则需要使用 View.setElement 作为正确委派事件并设置缓存的 this.$el.

If you wanted to set the el dynamically that way, you need to use View.setElement as that properly delegates events and sets up the cached this.$el.

作品

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

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

Live jsFiddle of your second example: http://jsfiddle.net/edwardmsmith/5Ss5G/21/

但这只是重新做已经在 Backbone 引擎盖下完成的工作.

But this is just re-doing what is already being done under the hood in Backbone.

这篇关于动态分配backbone.js视图el的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！