Cómo pasar parámetros a una vista

93

Tengo una serie de botones que, cuando se hace 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?
    }
});
vikmalhotra
fuente

Respuestas:

168

Solo necesita pasar el parámetro adicional cuando construye el MenuView. No es necesario agregar la initializefunción.

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

Y luego, en MenuView, puede usar this.options.position.

ACTUALIZACIÓN: Como @mu es demasiado corto , desde 1.1.0, Backbone Views ya no adjunta automáticamente opciones pasadas al constructor como this.options, pero puede hacerlo usted mismo si lo prefiere.

Entonces, en su initializemétodo, puede guardar el optionspasado como this.options:

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

o use algunas formas más finas como las describe @Brave Dave .

dira
fuente
1
Esto funciona perfectamente, simplemente agregue el parámetro en su vista método initialize: initialize: function (options) {alert (options.position); }
Cabuxa.Mapache
@ Cabuxa.Mapache No, no funciona. Esta respuesta usa this.options.position, no options.position. Vistas utilizadas para adjuntar los initializeargumentos, this.optionspero eso dejó de suceder en 1.1.0.
mu es demasiado corto
46

Agregue un argumento de opciones a initialize:

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

Y luego pase algunas opciones cuando cree su vista:

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

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

mu es demasiado corto
fuente
esto es más elegante / simple para la mayoría de las situaciones.
Cullen DOM
@CullenSUN: Gracias. Prefiero lo explícito de este enfoque, la mágica "acción a distancia" del uso this.optionsme da mantenimiento y depuración de pesadillas.
mu es demasiado corto
Primero vi el enlace Backbone, pero su ejemplo me lo aclaró. Gracias
Manuel Hernandez
Esto ha quedado obsoleto y ya no se puede usarthis.options
Viaje
4
@Trip: ¿Eh? initialize: function(options) { ... }está bien, el cambio es que Backbone ya no establece automáticamente this.options: "Backbone Views ya no adjunta automáticamente opciones pasadas al constructor como this.options, pero puede hacerlo usted mismo si lo prefiere". .
mu es demasiado corto
12

A partir de backbone 1.1.0, el optionsargumento ya no se adjunta automáticamente a la vista (consulte el problema 2458 para obtener más información). Ahora necesita adjuntar las opciones de cada vista manualmente:

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

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

Alternativamente, puede usar este mini complemento para adjuntar automáticamente las opciones de la lista blanca, así:

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

pasar de otro lugar

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

Agregue un argumento de opciones para inicializar en vista de que está obteniendo 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});
Imtiaz Mirza
fuente
5
escribir respuestas mejoradas no colectivas.
Konga Raju
¡Esta es una respuesta mejorada!
Imtiaz Mirza
-2

Utilice this.options para recuperar argumentr en la 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/

Nishant Kumar
fuente