Différentes techniques de rendu dans le modèle de guidon emberjs

Question

J'ai lu beaucoup de choses sur emberjs ces derniers temps mais quelque chose n'est pas vraiment clair pour moi : J'ai l'impression qu'il y a différentes façons de rendre un template. Quelqu'un peut-il m'expliquer les différences entre celles-ci ?

{{render}}
{{partial}}
{{template}}
{{outlet}}

J'utilise pre4, donc si certains de ces mots-clés sont obsolètes, merci de le signaler.

Answer 1

Vous pouvez rechercher la source Ember.JS pour tous ces éléments en recherchant : Ember.Handlebars.registerHelper('?' . Par exemple, pour trouver la partie où template est défini, recherchez : Ember.Handlebars.registerHelper('template')

{template}}

est similaire à la {{partial}} mais il recherche les modèles que vous définissez dans le champ Ember.TEMPLATES hachage. Nous pouvons voir un exemple dans le code source : Ember.TEMPLATES["my_cool_template"] = Ember.Handlebars.compile('<b>{{user}}</b>'); et nous pouvons le rendre de cette façon.

J'ai entendu un murmure qui {{template}} est @deprecated mais je n'arrive pas à trouver où j'ai trouvé cette information pour le moment. Cependant, il est bon de mentionner que je ne me suis jamais retrouvé à utiliser celle-ci. Je préfère {{partial}} .

Edit : Il semble que ce ne soit pas @deprecated à partir de 3df5ddfd4f . Je me suis trompé !

{partiellement}}

Ceci est différent de la {{render}} en ce sens que le controller y view sont héritées du contexte qui l'a appelé. Par exemple, si vous êtes dans le contexte UserRoute et que vous chargez un partiel dans votre modèle d'utilisateur, alors l'option UserView y UserController seront tous deux passés à votre partiel, afin qu'ils puissent accéder exactement aux mêmes informations que son parent actuel.

Les noms partiels, lorsqu'ils sont définis, commencent par un trait de soulignement. Par exemple, un Profile partiel aura le data-template-name de : data-template-name="_profile" mais est inséré dans votre vue comme {{partial "profile"}} .

{sortie}}

Vous vous retrouverez probablement à l'utiliser souvent. Il est principalement utilisé dans les cas où la fonction outlet change fréquemment, en fonction des interactions avec les utilisateurs. En passant à ( this.transitionTo / {{#linkTo}} ) d'une autre page, Ember insère la vue dans la section {{outlet}} et joint les controller y view .

Par exemple, si vous êtes en transition vers /#/pets alors, par défaut, Ember chargera le fichier PetsView dans le {{outlet}} et joindre le PetsController tout cela après avoir initialisé le PetsRoute pour prendre des instructions avant d'initialiser la vue et de trouver le contrôleur.

{{render}}

Il s'agit d'un mélange d'un {{outlet}} et un {{partial}} . Il est utilisé pour les pages statiques qui ne changent pas pour d'autres pages (comme une outlet mais il n'hérite pas du contrôleur et de la vue (comme le fait un fichier de type partial fait).

C'est mieux avec un exemple. Disons que vous avez une navigation. Habituellement, vous n'aurez qu'une seule navigation, et elle ne changera pas pour une autre, mais vous voulez que la navigation ait son propre contrôleur et sa propre vue, et ne soit pas héritée du contexte (probablement ApplicationRoute ). Par conséquent, lorsque vous insérez la navigation ( {{render "navigation"}} ), Ember attachera App.NavigationController y App.NavigationView .

Résumé

• template : Consulte un hachage global et insère la vue lorsqu'il la trouve (peut-être bientôt @deprecated ) ;
• partial : Utilisé pour diviser des vues compliquées, et hérite du contrôleur/de la vue du parent (si vous êtes dans la section UserController alors le partiel aura également accès à cette vue et à la vue qui lui est associée).
• outlet : Le plus utilisé, il permet de passer rapidement d'une page à une autre. Contrôleur/vue pertinent(e) joint(e).
• render : Similaire à un outlet, mais est utilisé pour les pages qui sont persistantes dans toute l'application. Il suppose que le contrôleur/la vue concerné(e) et n'a pas d'en hériter.

Les ai-je bien expliquées ?

Juste pour clarifier :

• Partiel : Contrôleur hérité, vue héritée, non commutable ;
• Sortie : Contrôleur pertinent, vue pertinente, commutable ;
• Rendu : Contrôleur pertinent, vue pertinente, non commutable ;

Answer 2

Le guide fournit également des informations utiles aquí ! Voici un résumé rapide :

Answer 3

Je voulais poster une autre réponse ici qui m'a vraiment aidé à clarifier quand utiliser les différents types de template techniques -

Route

L'utilisation d'un itinéraire est nécessaire lorsque vous avez besoin d'un itinéraire complet. Un "itinéraire" possède une URL unique et se compose de classes générées ou définies par l'utilisateur, du type suivant

1. Route (Ember.Route)
2. Contrôleur (Ember.Controller || Ember.ArrayController || Ember.ObjectController)
3. Vue (Ember.View)
4. Modèle (modèle de guidon)

{{render}}

Utilisez le {{render}} lorsque vous avez besoin d'une vue mais que vous devez fournir certaines fonctionnalités avec un contrôleur. {{render}} fait no ont une URL unique et se composent des éléments suivants -

1. Contrôleur (Ember.Controller || Ember.ArrayController || Ember.ObjectController)
2. Vue (Ember.View)
3. Modèle (modèle de guidon)

{{composant}}

Utilisez le {{component}} lorsque vous construisez un modèle fréquemment réutilisé qui existe indépendamment du contexte dans lequel il est rendu. Par exemple, si vous construisez un site Web de vente au détail et que vous souhaitez avoir une vue du produit indépendamment de l'endroit où elle est rendue, cela peut être un bon exemple. {{component}} fait no ont un URL unique ni un controller mais a plutôt un component et se compose des éléments suivants -

1. Composant (Ember.Component)
2. Modèle (modèle de guidon)

{partiellement}}

Utilisez le {{partial}} lorsque vous réutilisez simplement un balisage. {{partial}} fait no n'a pas d'URL unique ni d'adossement particulier comme un composant et se compose des éléments suivants -

1. Modèle (modèle de guidon)