动态分配Backbone.js的查看El有道 [英] proper way to dynamically assign backbone.js view 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 ).

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

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
  }
});

到目前为止，如果我给报在初始化功能，并设置事件通常如下，事件不会触发：

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
  }
});

我的第一反应是有报是返回字符串重新感兴趣的DOM元素presentation功能：

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
  }
});

不过，这触发 someFunction x次，如果我有 someView X实例。

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

接下来，我试过同时设置报和事件在属性初始化：

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
  }
});

，但这并不触发事件。在这一点上我是pretty很多钓鱼。

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

有谁知道如何实例化一个Backbone.js的与查看报特定于该实例有事件触发只为实例，的没有其他实例查看？

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 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/

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

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;
}

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

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)
}

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

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

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

这篇关于动态分配Backbone.js的查看El有道的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！