Comment appeler la méthode d'un composant à partir d'un contrôleur

J'ai un composant qui représentent une carte et après une action dans mon contrôleur, je tiens à appeler une méthode sur le composant pour le centre de la carte. Le code ressemble à ceci

App.PlacesController = Ember.Controller.extend({
  actions : {
    centerMap : function () {
        //how to call from here to GoogleMapComponent.centerMap ??
    }
  }
});


App.GoogleMapComponent = Ember.Component.extend({
  centerMap : function () {
  }
});

modèle

{{google-map}}
<button {{action "centerMap"}}>Center Map</button>

J'ai trouvé une solution de contournement, mais je ne pense pas que ce soit la Braise moyen de le faire.

{{google-map viewName="mapView"}}
<button class="center-map">Center Map</button>

App.PlacesView = Ember.View.extend({
  didInsertElement : function () {
    this.$(".center-map").click(this.clickCenterMap.bind(this));
  },

  clickCenterMap : function () {
    this.get("mapView").centerMap();
  }
});

InformationsquelleAutor axelhzf | 2013-10-27

ember.js

23

Dans la Braise, points de vue (les Composants sont glorifiés vues) connaissent leur contrôleur, mais les contrôleurs ne sais PAS à propos de points de vue. C'est par la conception (MVC) pour garder les choses découplé, et donc vous pouvez avoir de nombreux points de vue qui sont "alimentés" par un seul contrôleur et le contrôleur est pas plus sage. Donc lorsque vous pensez à propos de la relation, des changements peuvent se produire à un contrôleur et une vue de réagir à ces changements. Donc, juste pour rappeler, vous ne devriez jamais tenter d'accéder à une vue de composant/depuis un contrôleur.

Il ya quelques options que je pense lorsque vous traitez avec votre exemple.
1. Faire le bouton de la partie de votre composant! Les composants sont conçus pour gérer la saisie de l'utilisateur, comme le clic sur un bouton, de sorte que vous pouvez envisager de faire la touche une partie de la carte du composant et de la gestion des clics dans les actions de hachage de votre composant. Si ce bouton est toujours partant pour accompagner la carte de composant, puis je le recommande certainement cette approche.
2. Vous pourriez avoir une propriété booléenne sur votre contrôleur comme isCentered, et lorsque le bouton est cliqué, il est défini à true. Dans votre partie, vous pouvez lier à celle du contrôleur de la propriété, et de réagir à chaque fois que des modifications de la propriété. C'est une liaison bidirectionnelle de sorte que vous pouvez également modifier vos liée localement à la propriété à false si l'utilisateur déplace la carte, par exemple.
  
  Contrôleur:
```
...
isCentered: false,
actions: {
    centerMap: {
        this.set('isCentered', true);
    }
}
...
```
  Composant:
```
...
isCenteredBinding: 'controller.isCentered',
onIsCenteredChange: function () {
    //do your thing
}.observes('isCentered'),
...
```
3. Jeremy Green solution peut fonctionner que si vous mélangez dans la Braise.Evented mixin dans le contrôleur (ce qui ajoute de la pub/sub trigger et on méthodes)
- Je vous remercie pour votre réponse, je vais peut-être confondu avec la Braise modèle MVC. Je suis nouveau dans la Braise. Je pensais que Contrôleur de communiquer à des points de vue via l'appel de méthodes et de points de vue devraient communiquer aux Contrôleurs via des événements, mais il semble être tout le contraire. Dans ce diapositives docs.google.com/presentation/d/... (diapositive 7) il y a une communication directe entre les vues et les contrôleurs, mais le mécanisme n'est pas spécifié. Qui est responsable de la création de vues et d'appel rendu de détruire ou de méthode? N'est pas le contrôleur?
- le ember1.6,du composant contrôleur pas à la mvc du contrôleur.
- 1) en fait le plus de sens, si le bouton a à vivre ailleurs dans les dom c'est toujours utile d'envisager la braise-trou de ver addon
InformationsquelleAutor Jason Monma
9

Vous pouvez utiliser on d'avoir de vos composants à l'écoute pour un événement à partir de la manette, puis vous pouvez utiliser trigger dans le contrôleur d'émettre un événement.

Dans votre composant que vous pourriez avoir quelque chose comme ceci:
```
didInsertElement : function(){
  this.get('controller').on('recenter', $.proxy(this.recenter, this));
},

recenter : function(){
  this.get("mapView").centerMap()
}
```
Et dans votre contrôleur, vous pourriez avoir :
```
actions : {
  centerMap : function () {
    this.trigger('recenter');
  }
}
```
- Je suis l'aide de Braise 1.1.2 et la EmberController n'est pas un déclencheur de la méthode. C'est le bon modèle? Le contrôleur doit événements de lancement et de la vue, de les écouter?
- Pour déclencher des événements et de les écouter sur eux, vous devez créer un objet par l'ajout de la Ember.Evented mixin, comme suit: App.someController = Ember.Controller.extend(Ember.Evented, { ... }); , alors vous pouvez vous abonner à des événements et de déclencher des événements en utilisant les méthodes de la Ember.Evented mixin.
- J'aime bien cette solution, mais je n'ai pas vu l'utilisation de $.proxy avant - pouvez-vous préciser exactement ce que cela fait?
- permet de s'assurer que this est lié à la bonne chose quand le recenter fonction est appelée. api.jquery.com/jQuery.proxy
- Je pense que pour ajouter un événement sur le contrôleur de parent du composant dont vous avez besoin pour écrire this.get('targetObject') au lieu de this.get('controller')
InformationsquelleAutor Jeremy Green
6

Lier une propriété d'un composant à la propriété de contrôleur dans le modèle:
```
    {{google-map componentProperty=controllerProperty}}
```
Alors observer les propriétés de composant en composant:
```
    onChange: function () {
        //Do your thing
    }.observes('componentProperty')
```
Maintenant, à chaque fois controllerProperty est changé dans le contrôleur, onChange dans le composant sera appelé.

De cette réponse, deuxième alinéa.

InformationsquelleAutor Felix
3

Je pense que c'est OK d'avoir une référence dans votre contrôleur à votre composant. Il est vrai que votre composant encapsule son propre comportement, mais les méthodes publiques comme reload etc. sont parfaitement bien.

Ma solution pour cela est de passer le courant controller de la composante et de définir une propriété sur le contrôleur au sein de la composante.

Exemple

modèle.hbs:

{{#component delegate=controller property="refComponent"}}

component.js:
```
init: function() {
   this._super.apply(this, arguments);

   if (this.get("delegate")) {
      this.get('delegate').set(this.get("property") || "default", this);
   }
}
```
Maintenant dans votre contrôleur, vous pouvez simplement obtenir une référence à votre composant avec this.get("refComponent").

Steffen
- Bien que je trouve cela contre la Braise philoshopy, je me suis trouvé dans le besoin de le faire. Je vais probablement avoir à réécrire mon code un peu plus tard, mais il fonctionne comme une excellente solution de contournement. Grâce Steffen.
- y compris le contrôleur sera le déclencheur d'erreur d'assertion de braise version >2
InformationsquelleAutor Steffen Brem
1

À l'intérieur de vos composants à l'appel:
```
var parentController = this.get('targetObject');
```
Voir: http://emberjs.com/api/classes/Ember.Component.html#property_targetObject

InformationsquelleAutor Michael Benin

Vous devez vous connecter pour publier un commentaire.