Javascript Girl
  1. Javascript Girl
  3. Comment passer les paramètres à une vue
Intereting Posts
Quelle est la différence entre .map, .every et. ForEach? Pourquoi "a + + b" fonctionne-t-il, mais "a ++ b" ne fonctionne pas? AngularJS – Comment filtrer un tas de certaines ID? "InnerHTML + = …" vs "appendChild (txtNode)" Comment inclure javascript sur le côté client de node.js? Angulaire 2 avec du jasmin: composant d'essai avec service injecté Couverture de test CasperJS Quelle est la différence entre les éléments non initialisés dans un tableau en JavaScript vs Java? Comment obtenir l'état HTTP à partir de JavaScript Show hide div sur mouseover et mouseout Function vs. Functional Notaion – est-ce qu'il y a une différence? Limitation de longueur de caractères en expression régulière Existe-t-il une bibliothèque de calendrier JS Widget / Calendrier? Puis-je créer une liaison personnalisée qui utilise d'autres liaisons dans knockout.js Comment afficher les champs de saisie du formulaire en fonction de la valeur sélectionnée?

Comment passer les paramètres à une vue

J'ai une série de boutons qui, lorsqu'ils sont cliqués, affichent un menu contextuel placé juste en dessous du bouton. Je souhaite 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? } });

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

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

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

MISE À JOUR: Comme @mu est un état trop court , depuis 1.1.0, Backbone Views ne contient plus automatiquement les options passées au constructeur en tant que this.options, mais vous pouvez le faire vous-même si vous le préférez.

Ainsi, dans votre méthode d' initialize , vous pouvez enregistrer les options passées comme this.options : 

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

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

Ajoutez un argument d'options pour l' initialize : 

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

Ensuite, passez 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

À partir de l'arrière-page 1.1.0, l'argument des options n'est plus automatiquement attaché à la vue (voir l' édition 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(), ... });

Alternativement, vous pouvez utiliser ce mini-plugin pour attacher automatiquement les options listées en blanc, de la manière suivante: 

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

Passer d'un autre endroit 

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

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

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

Pour obtenir l'utilisation de la valeur – 

  var v = new ItemView({ pos: this.options.positions});

Utilisez this.options pour récupérer l'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 travail: http://jsfiddle.net/Cpn3g/1771/