web-dev-qa-db-fra.com

ember.js + guidon: rendu vs sortie vs partiel vs vue vs contrôle

Il y a des explications dispersées de chacun, mais je ne suis toujours pas clair à 100% 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 message a été très utile avec un rendu partiel vs

javascriptember.jshandlebars.js
53
doub1ejack

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

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

2 .{{outlet NAME}} - Offre la possibilité de spécifier dans l'itinéraire où rendre exactement le contenu. Utile lorsque vous essayez de rendre le contenu de plusieurs modèles pour un itinéraire .

3 .{{render}} - Similaire à outlet mais le contrôleur/vue/modèle peut être spécifié directement ou indirectement depuis l'assistant. Utile lorsqu'il est nécessaire de rendre le contenu de plusieurs modèles avec la possibilité de remplacer 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 lorsque nécessaire pour remplacer le contexte et le modèle de l'itinéraire, tout en affichant 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 vous utilisez render, il n'est pas possible d'utiliser plusieurs rendus pour le même itinéraire sans spécifier le modèle, dans ce cas, 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'assistant de contrôle a été supprimé https://github.com/emberjs/ember.js/commit/86eecd7ef7cdc7d2ea6f77b3a726b293292ec55d .

5 .{{partial}} - Prend le modèle à rendre en argument et rend ce modèle en place. Il ne change ni le contexte ni la portée. Il laisse simplement le modèle donné en place avec 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èle, pour un meilleur contrôle ou réutilisation, sans créer de classes d'affichage .

6 .{{view}} - Cela fonctionne comme partiel mais une classe de vue est fournie. La classe de vue spécifie le modèle à utiliser. Utile lors de la division d'un modèle en modules mais nécessitant une classe de vue, par exemple pour la gestion des événements.

sept.{{#view}} - Il y a aussi la forme de bloc de l'assistant de vue, qui permet de spécifier le modèle de la vue enfant en ligne avec le modèle de vue parent. ( http://emberjs.com/guides/views/inserting-views-in-templates/ )

85
melc

{{outlet}} ceci définit où les ressources/routes imbriquées seront rendues dans le modèle d'une route

{{outlet NAME}} cela crée une sortie nommée où vous pouvez rendre quelque chose par programme 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 à configurer Le deuxième paramètre facultatif est un modèle, qui sera transmis au contrôleur s'il est fourni

{{render}} fait plusieurs choses:

Lorsqu'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 Rend le 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 en place (en utilisant la portée actuelle comme contexte).

{{view}} Cet assistant fonctionne comme l'assistant partiel, 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}} is 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.

La plupart de cela, je viens de copier et coller de leur documentation: http://emberjs.com/guides/templates/rendering-with-helpers/

9
Kingpin2k
  1. render helper est déconseillé dans v2.x à la place, vous devez utiliser l'addon ember-else . https://emberjs.com/deprecations/v2.x/#toc_rendering-into-a-render-helper-that-resolves-to-an-outlet
  2. ember.view est déconseillé dans v1.x, utilisez plutôt Component . se référer https://emberjs.com/deprecations/v1.x/#toc_ember-view
  3. control helper est expérimental uniquement, il est déjà supprimé

Je dirais actuellement seulement {{outlet}} est encouragé un restant tous sont obsolètes/supprimés.

2
Ember Freak

Les principales différences sont

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

{{partial}} rend le modèle disponible dans Ember.TEMPLATES. il se peut qu'il n'ait pas lié la classe de vue. L'avantage est le contexte des restes de modèle de la vue parent.

{{outlet}} Spécifiez le routeur qui ici est censé rendre la vue ou le modèle fourni ou selon le hook renderTemplate ().

{{outlet NAME}} utile lorsque vous souhaitez rendre deux vues/modèles à différentes positions. Vous pouvez nommer les prises et demander au routeur de restituer.

{{render}} identique à la sortie, sauf que vous forcez le routeur à afficher une vue/un modèle spécifique.

0
thecodejack