web-dev-qa-db-fra.com

Comment passer des paramètres à une vue

J'ai une série de boutons qui, lorsqu'ils sont cliqués, affichent un menu contextuel situé juste en dessous du bouton. Je veux passer la position du bouton à la vue. Comment puis je faire ça?

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?
    }
});
javascriptbackbone.js
93
vikmalhotra

Il vous suffit de passer le paramètre supplémentaire lors de la construction de MenuView. Pas besoin d'ajouter la fonction initialize.

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

Et puis, dans MenuView, vous pouvez utiliser this.options.position.

UPDATE: Comme @ mu est des états trop courts , depuis 1.1.0, Les vues de dorsale ne sont plus automatiquement attachées options passées au constructeur sous la forme this.options, mais vous pouvez le faire vous-même si vous préférez.

Donc, dans votre méthode initialize, vous pouvez enregistrer le options passé en tant que this.options:

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

ou utilisez des méthodes plus fines comme décrit par @Brave Dave .

167
dira

Ajouter un argument d'options à initialize:

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

Et puis passez quelques options lorsque vous créez votre vue:

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

Pour plus d'informations: http://backbonejs.org/#View-constructor

46
mu is too short

A partir de la colonne vertébrale 1.1.0, l'argument options est n'est plus attaché automatiquement à la vue (voir numéro 2458 pour en savoir plus). Vous devez maintenant attacher les options de chaque vue manuellement:

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

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

Sinon, vous pouvez utiliser ce mini plugin pour attacher automatiquement les options de la liste blanche, comme ceci:

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