Como passar parâmetros para uma visão

93

Tenho uma série de botões que, quando clicados, exibem um menu pop-up posicionado logo abaixo do botão. Quero passar a posição do botão para a visualização. Como eu posso fazer isso?

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
fonte

Respostas:

168

Você só precisa passar o parâmetro extra ao construir o MenuView. Não há necessidade de adicionar a initializefunção.

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

E então, em MenuView, você pode usar this.options.position.

ATUALIZAÇÃO: Como @mu tem estados muito curtos , desde 1.1.0, Visualizações de Backbone não anexam mais opções passadas para o construtor como this.options, mas você mesmo pode fazer isso se preferir.

Portanto, em seu initializemétodo, você pode salvar o optionspassado como this.options:

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

ou use algumas maneiras mais refinadas, conforme descrito por @Brave Dave .

dira
fonte
1
Isso funciona perfeitamente, basta adicionar o parâmetro no método de inicialização de sua visualização: initialize: function (options) {alert (options.position); }
Cabuxa.Mapache
@ Cabuxa.Mapache Não, não funciona. Esta resposta usa this.options.position, não options.position. As visualizações costumavam anexar os initializeargumentos, this.optionsmas isso parou de acontecer em 1.1.0.
mu é muito curto
46

Adicione um argumento de opções a initialize:

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

E então passe algumas opções ao criar sua visualização:

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

Para mais informações: http://backbonejs.org/#View-constructor

mu é muito curto
fonte
isso é mais elegante / simples para a maioria das situações.
Cullen SUN
@CullenSUN: Obrigado. Eu prefiro a explicitação dessa abordagem, a mágica "ação à distância" de usar this.optionsme dá pesadelos de manutenção e depuração.
mu é muito curto
Eu vi o link do Backbone primeiro, mas seu exemplo esclareceu para mim. Obrigado
Manuel Hernandez
O uso foi suspenso e você não pode mais usarthis.options
Viagem de
4
@Trip: Hã? initialize: function(options) { ... }está tudo bem, a mudança é que o Backbone não define mais automaticamente this.optionspara você: "Visualizações do Backbone não anexam mais automaticamente as opções passadas para o construtor como this.options, mas você pode fazer isso sozinho, se preferir." .
mu é muito curto
12

A partir do backbone 1.1.0, o optionsargumento não é mais anexado automaticamente à visualização (consulte o problema 2458 para discussão). Agora você precisa anexar as opções de cada visualização manualmente:

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

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

Como alternativa, você pode usar este mini-plug - in para anexar automaticamente as opções da lista branca, como:

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

passe de outro local

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

Adicione um argumento de opções para inicializar em vista que você está recebendo a variável passada,

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

para obter o valor de uso -

   var v = new ItemView({ pos: this.options.positions});
Imtiaz Mirza
fonte
5
escreva respostas melhoradas não coletivas.
Konga Raju
Esta é uma resposta aprimorada!
Imtiaz Mirza
-2

Use this.options para recuperar o argumentr em 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'});
    });

Exemplo de trabalho: http://jsfiddle.net/Cpn3g/1771/

Nishant Kumar
fonte