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.