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?
    }
});

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 .



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


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

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

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/

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.