Правильный способ динамического назначения backbone.js view 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 быть функцией, которая возвращает строковое представление йот интересующего элемента:

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 х раз, если у меня есть х инстанциация .

Далее я попытался установить как атрибуты 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?

Answer 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(); 
​ 

Смотреть это жить jsFiddle: http://jsfiddle.net/edwardmsmith/QDFwf/15/

Причина ваш второй пример не работает, что с последними версиями Backbone, вы не можете просто установить «el» напрямую. Это не так, как вы заметили, правильно установить/обновить события.

Не работает

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

Если вы хотите установить эль динамически таким образом, вы должны использовать View.setElement как что должным образом делегатов событий и устанавливает кэшированные this.$el.

Работы

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

Живая jsFiddle вашего второго примера: http://jsfiddle.net/edwardmsmith/5Ss5G/21/

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