Cómo pasar parámetros a una vista

Question

Tengo una serie de botones que, al hacer clic, muestran un menú emergente ubicado justo debajo del botón. Quiero pasar la posición del botón a la vista. ¿Cómo puedo hacer eso?

ItemView = Backbone.View.extend({ 
    tagName: 'li', 
    events: { 
     'click': 'showMenu' 
    }, 
    initialize: function() { 
     _.bindAll(this, 'render'); 
    }, 
    render: function() { 
    return $(this.el).html(this.model.get('name')); 
    }, 
    showMenu: function() { 
     var itemColl = new ItemColl(); 
     new MenuView({collection: itemColl}); // how to pass the position of menu here? 
    } 
}); 

Answer 1

Usted solo necesitas pasar el parámetro adicional cuando construyes el Menú Ver. No es necesario agregar la función initialize.

new MenuView({ 
    collection: itemColl, 
    position: this.getPosition() 
}) 

Y entonces, en MenuView, puede utilizar this.options.position.

ACTUALIZACIÓN: Como@mu is too short states, desde 1.1.0, Backbone Views no longer automatically attach options passed to the constructor as this.options, but you can do it yourself if you prefer.

Así que en su método initialize, puede guardar el options pasado como this.options:

initialize: function(options) { 
    this.options = options; 
    _.bindAll(this, 'render'); 
}, 

o utilizar algunas formas más sutiles como described by @Brave Dave .

Answer 2

Añadir un argumento opciones para initialize:

initialize: function(options) { 
    // Deal with default options and then look at options.pos 
    // ... 
}, 

y luego pasar en algunas opciones al crear la vista:

var v = new ItemView({ pos: whatever_it_is}); 

Para más información: http://backbonejs.org/#View-constructor

Answer 3

pase desde otro lugar

new MenuView({ 
    collection: itemColl, 
    position: this.getPosition() 
}) 

Añadir un argumento opciones para inicializar en vista de que está recibiendo esa variable pasada,

initialize: function(options) { 
    // Deal with default options and then look at options.pos 
    // ... 
}, 

para obtener el valor de uso -

var v = new ItemView({ pos: this.options.positions}); 

Answer 4

A partir del backbone 1.1.0, el argumento options es no longer attached automáticamente a la vista (vea issue 2458 para la discusión). Ahora tiene que unir las opciones de cada vista de forma manual:

MenuView = Backbone.View.extend({ 
    initialize: function(options) { 
     _.extend(this, _.pick(options, "position", ...)); 
    } 
}); 

new MenuView({ 
    collection: itemColl, 
    position: this.getPosition(), 
    ... 
}); 

Alternativamente, puede utilizar this mini plugin para auto-conectar opciones de la lista blanca, así:

MenuView = Backbone.View.extend({ 
    options : ["position", ...] // options.position will be copied to this.position 
}); 

Answer 5

Uso this.options a recuperar argumentr en vista

// Place holder 
<div class="contentName"></div> 

var showNameView = Backbone.View.extend({ 
     el:'.contentName', 
     initialize: function(){ 
      // Get name value by this.options.name 
      this.render(this.options.name); 
     }, 
     render: function(name){ 
      $('.contentName').html(name); 
     } 
    }); 

    $(document).ready(function(){ 
     // Passing name as argument to view 
     var myName1 = new showNameView({name: 'Nishant'}); 
    }); 

Ejemplo de trabajo: http://jsfiddle.net/Cpn3g/1771/