Come passare parametri a una vista

Question

Ho una serie di pulsanti che quando si fa clic visualizzare un menu a comparsa posizionato appena sotto il pulsante. Voglio passare la posizione del tasto alla vista. Come posso fare?

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

Hai solo bisogno di passare il parametro in più quando si costruisce il MenuView. Non c'è bisogno di aggiungere la funzione initialize.

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

E poi, in MenuView, è possibile utilizzare this.options.position.

UPDATE: Come @mu è stati troppo brevi , poiché 1.1.0, Backbone Visualizzazioni non attaccano automaticamente opzioni passate al costruttore come this.options, ma si può fare da soli, se si preferisce.

Quindi nel tuo metodo di initialize, è possibile salvare il options passata come this.options:

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

o utilizzare alcuni modi più sottili come descritto da Dave @Brave .

Answer 2

Aggiungi un argomento opzioni per initialize:

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

E poi passare alcune opzioni quando si crea la vista:

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

Per ulteriori informazioni: http://backbonejs.org/#View-constructor

Answer 3

A partire dal backbone 1.1.0, l'argomento è options non è più attaccato automaticamente alla visualizzazione (vedi numero 2458 per la discussione). A questo punto è necessario allegare le opzioni di ogni vista manualmente:

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

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

In alternativa è possibile utilizzare questo mini plug per auto-attach opzioni bianche quotate, in questo modo:

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

Answer 4

passaggio da altro luogo

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

Aggiungi un argomento opzioni per inizializzare in considerazione che si stanno ottenendo che variabile passata,

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

per ottenere il valore uso -

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

Answer 5

Usa this.options per recuperare argumentr in 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'});
    });

Esempio di lavoro: http://jsfiddle.net/Cpn3g/1771/