javascript - template - ember.js+handlebars: render vs outlet versus partial vs view vs control

emberjs transitiontoroute

Question

Hay explicaciones dispersas de cada uno alrededor, pero todavía no estoy 100% claro sobre las diferencias y el uso. ¿Podría alguien darme una comparación lado a lado?

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

Nota: esta publicación fue muy útil con el render parcial frente a

Answer 1

1. render helper está en desuso en v2.x, en su lugar debe usar ember-elsewhere addon. https://emberjs.com/deprecations/v2.x/#toc_rendering-into-a-render-helper-that-resolves-to-an-outlet
2. ember.view está en desuso en v1.x en su lugar usa Component . consulte https://emberjs.com/deprecations/v1.x/#toc_ember-view
3. control helper es solo experimental, ya se eliminó

Diría que actualmente solo se alienta {{outlet}} se detenga o elimine uno restante.

Answer 2

Las principales diferencias son

{{view}} representa la clase de vista proporcionada que debería estar disponible

{{partial}} representa la plantilla disponible en Ember.TEMPLATES. es posible que no haya relacionado la clase de vista. La ventaja es el contexto de la plantilla que queda de la vista principal.

{{outlet}} Especifique el enrutador que aquí se supone que debe representar la vista o plantilla proporcionada o según el enlace renderTemplate ().

{{outlet NAME}} útil cuando desea representar dos vistas / plantillas en diferentes posiciones. Puede nombrar los puntos de venta y pedirle al enrutador que los muestre.

{{render}} igual que outlet excepto que fuerza al enrutador a representar una vista / plantilla específica.

Answer 3

Todos ellos son ayudantes de plantilla con las siguientes características principales, tal como se describe en las guías de emberjs. ( http://emberjs.com/guides/templates/rendering-with-helpers/ )

1. {{outlet}} - Representa una plantilla basada en la ruta determinada por el enrutador. Según la ruta, se usan el controlador y la vista correspondientes. Esto es útil cuando se representan contenidos basados ​​en la ruta, que es el caso más común .

2. {{outlet NAME}} : proporciona la capacidad de especificar en la ruta dónde representar exactamente el contenido. Útil cuando intenta renderizar contenidos de más de una plantilla para una ruta .

3. {{render}} - Similar a outlet pero el controlador / vista / modelo se puede especificar directa o indirectamente desde el helper. Útil cuando se requiere para representar contenido de más de una plantilla con la capacidad de anular el contexto (vista / controlador) y el modelo. Si se especifica el modelo, utiliza una instancia única del controlador correspondiente; de ​​lo contrario, usará la instancia singleton. Útil cuando se requiere para sobreescribir el contexto y el modelo de la ruta, mientras se procesan múltiples contenidos de plantilla .

4. {{control}} - Funciona como renderizar, excepto que usa una nueva instancia de controlador para cada llamada, en lugar de reutilizar el controlador singleton. Cuando se usa el render no es posible usar múltiples renderizaciones para la misma ruta sin especificar el modelo, para ese caso se debe usar el control . Útil para admitir nuevas instancias de un controlador para cada contenido de plantilla presentado.

Actualización: Control auxiliar se ha eliminado https://github.com/emberjs/ember.js/commit/86eecd7ef7cdc7d2ea6f77b3a726b293292ec55d .

5. {{partial}} : toma la plantilla para representarla como un argumento y la muestra en su lugar. No cambia el contexto o el alcance. Simplemente coloca la plantilla dada en su lugar con el alcance actual. Entonces no se especifica ninguna clase de vista para el parcial. Útil cuando se requiere romper una plantilla en módulos de plantilla, para un mejor control o reutilización, sin crear ninguna clase de vista .

6. {{view}} - Esto funciona como parcial, pero se proporciona una clase de vista. La clase de vista especifica la plantilla que se utilizará. Es útil cuando se divide una plantilla en módulos pero se requiere una clase de vista, por ejemplo, para el manejo de eventos.

7. {{#view}} - También está la forma de bloque del asistente de visualización, que permite especificar la plantilla de la vista secundaria en línea con la plantilla de vista principal. ( http://emberjs.com/guides/views/inserting-views-in-templates/ )

Answer 4

{{outlet}} esto define dónde se renderizarán los recursos / rutas anidados dentro de la plantilla de una ruta

{{outlet NAME}} esto crea un punto de venta con nombre donde se puede convertir algo de forma programática

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}} toma dos parámetros:

El primer parámetro describe el contexto que se configurará El segundo parámetro opcional es un modelo, que se pasará al controlador si se proporciona

{{render}} hace varias cosas:

Cuando no se proporciona ningún modelo, obtiene la instancia singleton del controlador correspondiente. Cuando se proporciona un modelo, obtiene una instancia única del controlador correspondiente. Renders la plantilla con nombre usando este controlador. Establece el modelo del controlador correspondiente.

{{partial}} toma la plantilla para representarla como un argumento y la muestra en su lugar (utilizando el ámbito actual como contexto).

{{view}} Este helper funciona como el auxiliar parcial, excepto que en lugar de proporcionar una plantilla para representar dentro de la plantilla actual, usted proporciona una clase de vista. La vista controla qué plantilla se representa.

{{control}} está obsoleto funciona como renderizado, excepto que utiliza una nueva instancia de controlador para cada llamada, en lugar de reutilizar el controlador singleton.

La mayoría de esto acabo de copiar y pegar de su documentación: http://emberjs.com/guides/templates/rendering-with-helpers/