Comment passer des paramètres à une vue

93

J'ai une série de boutons qui, lorsqu'ils sont cliqués, affichent un menu contextuel placé 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?
    }
});
Vikmalhotra
la source

Réponses:

168

Il vous suffit de passer le paramètre supplémentaire lorsque vous construisez le MenuView. Pas besoin d'ajouter la initializefonction.

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

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

MISE À JOUR: Comme @mu est des états trop courts , depuis la version 1.1.0, vues Backbone n'attachent plus automatiquement les options passées au constructeur comme this.options, mais vous pouvez le faire vous-même si vous préférez.

Donc, dans votre initializeméthode, vous pouvez enregistrer le optionspassé sous this.options:

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

ou utilisez des moyens plus fins comme décrit par @Brave Dave .

dira
la source
1
Cela fonctionne parfaitement, ajoutez simplement le paramètre dans votre méthode d'initialisation de vue: initialize: function (options) {alert (options.position); }
Cabuxa.Mapache
@ Cabuxa.Mapache Non, cela ne fonctionne pas. Cette réponse utilise this.options.position, non options.position. Vues utilisées pour attacher les initializearguments this.optionsmais cela s'est arrêté dans la version 1.1.0.
mu est trop court
46

Ajoutez un argument d'options à initialize:

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

Et puis transmettez certaines options lorsque vous créez votre vue:

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

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

mu est trop court
la source
c'est plus élégant / simple pour la plupart des situations.
Cullen SUN
@CullenSUN: Merci. Je préfère l'explicitation de cette approche, «l'action à distance» magique de l'utilisation this.optionsme donne des cauchemars de maintenance et de débogage.
mu est trop court
J'ai vu le lien Backbone en premier, mais votre exemple m'a clarifié. Merci
Manuel Hernandez
Ceci est obsolète et vous ne pouvez plus utiliserthis.options
Trip
4
@Trip: Hein? initialize: function(options) { ... }C'est très bien, le changement est que Backbone ne définit plus automatiquement this.optionspour vous: "Les vues de Backbone n'attachent plus automatiquement les options passées au constructeur comme this.options, mais vous pouvez le faire vous-même si vous préférez." .
mu est trop court
12

Depuis le backbone 1.1.0, l' optionsargument n'est plus automatiquement attaché à la vue (voir le numéro 2458 pour discussion). Vous devez maintenant attacher manuellement les options de chaque vue:

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

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

Vous pouvez également 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
});
Brave Dave
la source
-1

passer d'un autre endroit

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

Ajoutez un argument d'options pour initialiser dans la vue que vous obtenez cette variable passée,

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

pour obtenir la valeur, utilisez -

   var v = new ItemView({ pos: this.options.positions});
Imtiaz Mirza
la source
5
rédigez des réponses améliorées et non collectives.
Konga Raju
C'est une réponse améliorée!
Imtiaz Mirza
-2

Utilisez this.options pour récupérer l'argumentr dans la vue

 // 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'});
    });

Exemple de travail: http://jsfiddle.net/Cpn3g/1771/

Nishant Kumar
la source