Правильный способ динамического назначения backbone.js view el

Я хотел бы создать два (или более) экземпляра представления, каждый с разными атрибутами 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?

Ответ 1

Вам действительно не нужно проходить все эти вещи "this.element".

Массив автоматически устанавливает вид "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();

Смотрите этот live 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)
}

Live jsВстроить второй пример: http://jsfiddle.net/edwardmsmith/5Ss5G/21/

Но это просто повторное выполнение того, что уже делается под капотом в Backbone.