backbone.js - significado - backbone js tutorial

forma correcta de asignar dinámicamente backbone.js view el

Question

Me gustaría crear dos (o más) instancias de vista, cada una con diferentes atributos el y tener eventos vinculados a ellas a través del hash de eventos de la vista de backbone.js (no a través de jQuery).

Hacer que los eventos se disparen cuando todas las instancias tienen el mismo el es fácil:

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

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

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

Hasta ahora, si asigno el en la función de initialize y establezco los events normalmente de la siguiente manera, los eventos no se disparan:

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

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

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

Mi primer instinto fue tener el ser una función que devuelve la representación de cadena del elemento dom de interés:

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

Sin embargo, esto desencadena someFunction x veces si tengo x instanciaciones de someView .

Luego intenté configurar los atributos el y el events en initialize :

someView = Backbone.View.extend({

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

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

pero esto no desencadena eventos. En este punto estoy pescando bastante.

¿Alguien sabe cómo instanciar una vista de backbone.js con un el específico para esa instancia que tiene eventos que solo desencadenan esa instancia, y no otras instancias de la View ?

Answer 1

En realidad, no necesitas pasar por todas esas cosas de "este elemento".

Backbone automáticamente establece el "el" de la vista en el "el" que pasa al constructor como una opción.

Luego está disponible como "this.el" a lo largo de la vista.

Esto es todo lo que necesitas hacer:

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

Vea este jsFiddle en vivo: http://jsfiddle.net/edwardmsmith/QDFwf/15/

El motivo por el que su segundo ejemplo no funcionó es que con las últimas versiones de Backbone, no puede simplemente configurar el "el" directamente. Esto no es, como habrás notado, establecer / actualizar eventos adecuadamente.

No funciona

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

Si desea establecer dinámicamente el el de esa manera, debe usar View.setElement ya que delega eventos correctamente y configura el caché this.$el .

Trabajos

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

Live jsFiddle de tu segundo ejemplo: http://jsfiddle.net/edwardmsmith/5Ss5G/21/

Pero esto es solo volver a hacer lo que ya se está haciendo bajo el capó en Backbone.