javascript - create - Ember: Error con salidas con nombre

ember on hover

Question

No sé por qué mis plantillas no se están procesando en las tiendas mencionadas. Esta es mi primera puñalada para aprender brasas y estoy atrapado en los puntos de venta mencionados.

Me gustaría mostrar SidebarTemplate en {{outlet "sidebar"}} y contentTemplate en {{outlet "content"}} pero sigo recibiendo el siguiente error en la consola: "Error al procesar la ruta: publicaciones No se puede leer propiedad ''connectOutlet'' de TypeError indefinido: no se puede leer la propiedad ''connectOutlet'' de undefined "

Aquí hay un violín para mi código: http://jsfiddle.net/va71wwr9/

Aquí está mi HTML:

<script type="text/x-handlebars">
<div class="nav-container">
<ul class="nav">
<li>{{#link-to ''home''}}Home{{/link-to}}</li>
<li>{{#link-to ''posts''}}Posts{{/link-to}}</li>
</ul>
</div>
{{outlet}}
</script>
<script type="text/x-handlebars" id="home">
<h1>Home screen</h1>
</script>
<script type="text/x-handlebars" id="posts">
<h1>Posts screen</h1>
<div class="sidebar-container">
{{outlet sidebar}}
</div>
<div class="content-container">
{{outlet content}}
</div>
</script>
<script type="text/x-handlebars" id="sidebarTemplate">
<p>Side bar stuff</p>
</script>
<script type="text/x-handlebars" id="contentTemplate">
<p>content stuff</p>
</script>

Aquí está mi JavaScript:

var App = Ember.Application.create();
App.Router.map(function() {
this.resource(''home'', {path: ''/''});
this.resource(''home'', {path: ''home''});
this.resource(''posts'', {path: ''posts''});
});
App.PostsRoute = Ember.Route.extend({
renderTemplate: function() {
this.render(''sidebarTemplate'', {
into: ''posts'',
outlet: ''sidebar''
});
this.render(''contentTemplate'', {
into: ''posts'',
outlet: ''content''
});
}
});

Answer 1

El problema es que no estás renderizando la plantilla de posts . Puede solucionar esto agregando this.render() o this._super() antes de definir las plantillas de las salidas de la ruta en la que se obtiene renderizado:

App.PostsRoute = Ember.Route.extend({
renderTemplate: function() {
// add this line
this._super();
this.render(''sidebarTemplate'', {
into: ''posts'',
outlet: ''sidebar''
});
this.render(''contentTemplate'', {
into: ''posts'',
outlet: ''content''
});
}
});

Solo una nota sobre la ampliación de funciones; En este código en particular, la llamada this._super() sería técnicamente lo mismo que llamar a this.render() , pero la diferencia es que al llamar a _super() está ampliando la funcionalidad de renderTemplate agregando sus cosas a lo que el método haría hacer por sí mismo, que en este caso sería llamar a this.render() y tal vez otra rutina que este método podría necesitar para realizar (en general, no exclusivo de renderTemplate ), mientras que si llama al método que hace lo que usted quiere En este caso, el método de render , excluirá del flujo las otras cosas que este método podría realizar. Y esto no está bien o mal. Realmente depende de lo que quieres lograr. En la mayoría de los casos, debe llamar a this._super() lugar de volver a escribir la implementación nuevamente en caso de que el método que está ampliando haga más de una cosa y / o llegue a hacer más de una cosa en el futuro.