ember.js + handlebars : render vs outlet vs partial vs view vs control

Question

Il y a des explications éparses sur chacun d'entre eux, mais je ne suis pas encore tout à fait au clair sur les différences et l'utilisation. Quelqu'un pourrait-il me donner une comparaison côte à côte ?

{{outlet}}
{{outlet NAME}}
{{render}}
{{partial}}
{{view}}
{{control}}

Remarque : ce poste a été très utile en ce qui concerne le rendu partiel par rapport à l'enduit

Answer 1

Ce sont tous des aides de template avec les caractéristiques principales suivantes, comme décrit dans les guides emberjs. ( http://emberjs.com/guides/templates/rendering-with-helpers/ )

1. {{outlet}} - Rend un modèle basé sur la route déterminée par le routeur. Le contrôleur et la vue correspondants sont utilisés en fonction de l'itinéraire. Ceci est utile pour rendre le contenu basé sur l'itinéraire, ce qui est le cas le plus courant .

2. {{outlet NAME}} - Permet de spécifier dans l'itinéraire l'endroit exact où le contenu doit être rendu. Utile pour rendre le contenu de plusieurs modèles pour un itinéraire. .

3. {{render}} - Similaire à outlet mais le contrôleur/la vue/le modèle peut être spécifié directement ou indirectement à partir de l'aide. Utile pour rendre le contenu de plus d'un modèle avec la possibilité de surcharger le contexte (vue/contrôleur) et le modèle. Si le modèle est spécifié, il utilise une instance unique du contrôleur correspondant, sinon il utilisera l'instance singleton. Utile lorsqu'il est nécessaire d'ignorer le contexte et le modèle de l'itinéraire, tout en rendant le contenu de plusieurs modèles. .

4. {{control}} - Fonctionne comme render, sauf qu'il utilise une nouvelle instance de contrôleur pour chaque appel, au lieu de réutiliser le contrôleur singleton. Lorsque l'on utilise render il n'est pas possible d'utiliser plusieurs rendus pour la même route sans spécifier le modèle. control doit être utilisé. Utile pour prendre en charge de nouvelles instances d'un contrôleur pour chaque contenu de modèle rendu.

Mise à jour : L'aide au contrôle a été supprimée https://github.com/emberjs/ember.js/commit/86eecd7ef7cdc7d2ea6f77b3a726b293292ec55d .

5. {{partial}} - Prend le modèle à rendre comme argument, et rend ce modèle à sa place. Il ne modifie pas le contexte ou la portée. Il dépose simplement le modèle donné à la place de la portée actuelle. Aucune classe de vue n'est donc spécifiée pour le partiel. Utile lorsqu'il est nécessaire de diviser un modèle en modules de modèles, pour un meilleur contrôle ou une meilleure réutilisation, sans créer de classes de vues. .

6. {{view}} - Cette méthode fonctionne comme la méthode partielle, mais une classe de vue est fournie. La classe de vue spécifie le modèle à utiliser. Utile lorsqu'un modèle est divisé en modules mais qu'une classe de vue est nécessaire, par exemple pour la gestion des événements.

7. {{#view}} - Il existe également la forme bloc de l'aide à la visualisation, qui permet de spécifier le modèle de la vue enfant en ligne avec le modèle de la vue parent. ( http://emberjs.com/guides/views/inserting-views-in-templates/ )

Answer 2

{{outlet}} définit l'endroit où les ressources/routes imbriquées seront rendues à l'intérieur du modèle d'une route

{{outlet NAME}} cela crée une sortie nommée où vous pouvez rendre par programme quelque chose dans

App.PostRoute = App.Route.extend({
  renderTemplate: function() {
    this.render('favoritePost', {   // the template to render
      into: 'posts',                // the route to render into
      outlet: 'posts',              // the name of the outlet in the route's template
      controller: 'blogPost'        // the controller to use for the template
    });
    this.render('comments', {
      into: 'favoritePost',
      outlet: 'comment',    
      controller: 'blogPost'
    });
  }
});

{{render}} prend deux paramètres :

Le premier paramètre décrit le contexte à mettre en place Le deuxième paramètre facultatif est un modèle, qui sera transmis au contrôleur s'il est fourni.

{{render}} fait plusieurs choses :

Si aucun modèle n'est fourni, il obtient l'instance singleton du contrôleur correspondant. Lorsqu'un modèle est fourni, il obtient une instance unique du contrôleur correspondant. Effectue le rendu du modèle nommé à l'aide de ce contrôleur Définit le modèle du contrôleur correspondant

{{partial}} prend le modèle à rendre comme argument, et rend ce modèle à la place (en utilisant la portée actuelle comme contexte).

{{view}} Cette aide fonctionne comme l'aide partielle, sauf qu'au lieu de fournir un modèle à rendre dans le modèle actuel, vous fournissez une classe de vue. La vue contrôle le modèle rendu.

{{control}} est obsolète fonctionne comme render, sauf qu'il utilise une nouvelle instance de contrôleur pour chaque appel, au lieu de réutiliser le contrôleur singleton.

J'ai copié et collé la plupart de ces informations à partir de leur documentation : http://emberjs.com/guides/templates/rendering-with-helpers/

Answer 3

Les principales différences sont les suivantes

{{view}} rend la classe de vue fournie qui doit être disponible

{{partial}} rend le template disponible dans Ember.TEMPLATES. il peut ne pas être lié à la classe de vue. L'avantage est que le contexte du modèle reste celui de la vue parente.

{{outlet}} Spécifier au routeur qu'il est censé rendre la vue ou le modèle fourni ou selon le crochet renderTemplate().

{{outlet NAME}} utile lorsque vous voulez rendre deux vues/modèles à des positions différentes. Vous pouvez nommer les sorties et demander au routeur d'effectuer le rendu.

{{render}} identique à outlet sauf que vous forcez le routeur à rendre une vue/un modèle spécifique.