Route qui observe la propriété sur le composant qui s'y connecte

Question

J'ai une liste d'éléments dans une route items qui utilise un composant event-item pour afficher chacun d'eux. Ce composant a deux de calculé sur ce qui établissent certaines classes en ce moment pour montrer à l'utilisateur quelques informations sur chaque élément ...

classNameBindings: ['winning','closed'], 
item: null, 
winning: Ember.computed('item.item_high_bid_user_id','userService.user_id',function(){ 
    return this.get('item.item_high_bid_user_id') == this.get('userService.user_id'); 
}), 
closed: Ember.computed('item.item_status',function(){ 
    return this.get('item.item_status') === 2; 
}) 

Dans le modèle de composant chaque élément dans la liste est enveloppé dans un link-to qui relie à l'itinéraire item, qui affiche un seul article.

Dans le modèle item et même route que je voudrais observer les cacher la section d'appel d'offres winning et closed de calculés qui sont sur le composant correspondant pour afficher ou masquer certaines choses dans le modèle item (IE. Si un élément est fermé, etc.)

Quelle serait la bonne façon de procéder?

BTW je suis sur Ember Ember 2.2.0 données 2.2.0 et Ember-cli 1.13.13

Answer 1

Si votre composant event-item est un lien vers une voie item, je suppose que vous passez le modèle à l'aide dans link-to, ce qui signifie tous les attributs nécessaires pour calculer ces propriétés seront toujours disponibles dans le contrôleur item.

// templates/whichever-template-holds-items.hbs 
{{#each items as |item|}} 
    {{event-item model=item}} 
{{/each}} 


// templates/components/event-item.hbs 
<div> 
    {{link-to 'item' model}} // pass model to item route 
</div> 


// controllers/item.js 
import Ember from 'ember'; 

export default Ember.Controller.extend({ 
    // include userService 

    winning: Ember.computed.equal('model.item_high_bid_user_id','userService.user_id'), 
    closed: Ember.computed.equal('model.item_status', 2) 
}); 


// templates/item.hbs 
{{#if winning}} 
    // show winning stuff 
{{/if}} 

{{#if closed}} 
    // show closed stuff 
{{/if}} 

Aussi, je remarqué que vous aviez un mélange des deux == et === pour vos conditionals dans le code affiché. La plupart du temps, vous voudrez utiliser ===, see this post.

presque oublié - Ember.computed.equal

---

MISE À JOUR (en réponse à votre commentaire ci-dessous)

Il y a deux manières d'alerter un contrôleur qu'une valeur dans un composant a changé, mais ni sont vraiment propices dans votre situation actuelle. La première façon (ce qui est ok à faire) serait de suivre DDAU (data down, actions up) et d'envoyer une action de votre composant à votre contrôleur, mais cela ne fonctionne que si le composant est à l'intérieur du contrôleur Voir, ce qui n'est pas le cas pour ce que vous faites. La deuxième façon (qui n'est pas vraiment idéale IMO) serait d'utiliser un service en quelque sorte d'un mode pub/sous qui permettrait aux composants distants/contrôleurs de se parler entre eux (you can read more about this method here). Vous obtiendrez probablement des réponses mitigées pour ce qui est de faire les choses de cette façon, car cela peut perturber le flux de données de votre application. Mais parfois, vos choix sont limités. Avec tout cela, je serais probablement de re-calcul dans le contrôleur plutôt que d'essayer d'envoyer des données à travers votre application d'un contrôleur à l'autre. En fin de compte ce sera toujours moins de code et moins de travail pour le framework. J'espère que cela a été utile.