Comment passer des paramètres à vue
-
25-10-2019 - |
Question
J'ai une série de boutons qui lorsque vous cliquez dessus afficher un menu contextuel positionné juste en dessous du bouton. Je veux passer la position de la touche à la vue. Comment puis-je faire?
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?
}
});
La solution
Vous avez juste besoin de passer le paramètre supplémentaire lorsque vous construisez la 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
.
Mise à jour: Comme @mu est trop court états , depuis 1.1.0, Vues Backbone ne se fixent automatiquement les options passées au constructeur comme this.options, mais vous pouvez le faire vous-même si vous préférez.
Dans votre méthode initialize
, vous pouvez enregistrer le options
passé en this.options
:
initialize: function(options) {
this.options = options;
_.bindAll(this, 'render');
},
ou utiliser des moyens plus fins que décrit par Dave @Brave .
Autres conseils
Ajoutez un argument d'options pour initialize
:
initialize: function(options) {
// Deal with default options and then look at options.pos
// ...
},
Et puis passer dans certaines options lorsque vous créez votre point de vue:
var v = new ItemView({ pos: whatever_it_is});
Pour plus d'informations: http://backbonejs.org/#View-constructor
de la colonne vertébrale 1.1.0, l'argument options
est plus attaché automatiquement à la vue (voir problème 2458 pour la discussion). Vous devez maintenant fixer 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(),
...
});
Vous pouvez également utiliser ce mini plug-in pour Autoconnecter les options de la liste blanche, comme suit:
MenuView = Backbone.View.extend({
options : ["position", ...] // options.position will be copied to this.position
});
passe à partir de l'autre emplacement
new MenuView({
collection: itemColl,
position: this.getPosition()
})
Ajoutez un argument d'options pour initialiser en vue que vous obtenez cette variable passé,
initialize: function(options) {
// Deal with default options and then look at options.pos
// ...
},
pour obtenir la valeur utilisation -
var v = new ItemView({ pos: this.options.positions});
Utilisez this.options pour récupérer argumentr en 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: http://jsfiddle.net/Cpn3g/1771/