ember.js | notifier les autres composants sur l'action d'un composant

Question

dans la components section at Ember's guides il y a une démo de Post Summary Component, en cliquant sur un titre de publication de poste ouvre son contenu ci-dessous.

Je voudrais ajouter la fonctionnalité pour fermer tous les autres récapitulatifs Post ouverts en même temps.

Le but de ma question est de comprendre comment le braise parle entre les composants sans sacrifier l'isolation.

les solutions que je pensais au sujet sont:

1. ont une composante enveloppe qu'il gère en quelque sorte

2. tir un événement comme « post-estival: ouvert » et faire d'autres composants à proximité eux-mêmes dessus (mais alors il peut Collider avec d'autres endroits sur l'application en utilisant les mêmes composants pour des utilisations différentes)

c'est la démo originale de la documentation: http://jsbin.com/uyibis/1/edit

Voici comment j'implémenter le comportement avec jQuery: http://jsbin.com/eremon/2/edit

var $ contents = $ hide(); ('contenu'.).

$ (document) .on ('click', '.title', function() {

de contents.hide de $();
$ (this) .next ('contenu'.). show()

});

Answer 1

Avec Ember.Component vous n'avez pas le contrôle du childViews, donc je l'utilise Ember.CollectionView, pour gérer les éléments. Parce que App.PostSummaryComponent s'étend déjà Ember.Component, je délègue au Ember.CollectionView ce comportement en utilisant view containerViewClass dans le modèle. Nous avons donc le meilleur des deux mondes.

Puisque cette propriété containerViewClass est une classe, nous avons besoin d'un moyen d'accéder à cette instance - pour interagir avec le childViews - lorsque la vue est créée. Pour ce faire, vous devez utiliser viewName='containerView' dans le modèle. Cela indique à Ember qu'une nouvelle instance de containerViewClass sera définie dans une propriété appelée containerView. Nous pouvons donc utiliser this.get("containerView") dans App.PostSummaryComponent.

La dernière modification consistait à déplacer l'assistant each du modèle d'index vers le modèle de composant. Ainsi, les autres appels au composant n'ont pas besoin de le répéter.

http://jsbin.com/ebayip/2/edit

Answer 2

Ce problème vient tout le temps de Braise.La façon dont je le résous est de garder la trace de quel poste est "ouvert" sur le contrôleur et ensuite la vue de chaque élément est responsable de son propre état sur la base de ces données. De cette façon, vous n'avez pas besoin de réinitialiser manuellement l'état de chaque publication à chaque fois que vous en basculez une.

La source canonique de la vérité est le contrôleur.

App.IndexController = Ember.ArrayController.extend({ 
    content: null, 
    selectedPost: null // null means no post selected 
}); 

Nous transmettons cette information aux composants via le modèle.

<script type="text/x-handlebars" data-template-name="index"> 
    {{#each post in controller}} 
     {{post-summary post=post selectedPost=selectedPost}} 
    {{/each}} 
</script> 

<script type="text/x-handlebars" id="components/post-summary"> 
    <h3 {{action "toggleBody"}}>{{post.title}}</h3> 
    {{#if isShowingBody}} 
     <p>{{{post.body}}}</p> 
    {{/if}} 
</script> 

Maintenant, la visibilité du corps pour un post donné peut être calculée par une propriété.

App.PostSummaryComponent = Ember.Component.extend({ 
    post: null, 
    selectedPost: null, 

    isShowingBody: function() { 
     return this.get('selectedPost') === this.get('post'); 
    }.property('selectedPost', 'post'), 

    toggleBody: function() { 
     this.set('selectedPost', 
       this.get('isShowingBody') ? null : this.get('post')); 
    }  
}); 

Here's the jsfiddle. On pourrait argumenter que ce n'est pas une solution orientée objet idéale, mais cela a considérablement amélioré la structure et la maintenabilité de mes applications Ember. Vous pouvez implémenter une grande variété de comportements de listes complexes en ayant chaque élément responsable de son propre état basé sur une source commune de vérité.