javascript - template - Emberjs carga múltiples controladores en uno
ember tutorial (2)
GUIÓN
Actualmente tengo un IndexRoute . Quiero cargar otros 3 controladores en él. Esos otros 3 controladores se llaman Sports , News , Business . Leí la documentación de embersjs y afirma que debe implementar el enganche renderTemplate en IndexRoute para que cada uno de esos controladores se muestre en el índice. http://emberjs.com/guides/routing/rendering-a-template/
Una vez que hice eso puse en la plantilla de índice
{{ outlet sports }}
{{ outlet news }}
{{ outlet business }}
Están apareciendo, pero a medida que miro a través de la extensión EmberInspector, el modelo individual de Sports , News , Business no se está cargando.
PREGUNTA
¿Por qué los modelos de estos Sports , News y Business no se cargan en el índice?
VEA JSBIN para mi código de muestra
http://jsbin.com/gecarido/1/edit
IMAGEN ADJUNTA
las rutas solo se activan cuando defines y acertas una ruta a través de la url.
Por ejemplo, si hubiera definido su enrutador de esta manera:
Ember.Router.map(function(){
this.resource(''foo'', function(){
this.resource(''bar'');
});
});
Y golpear /foo/bar
Golpearía
App.FooRoute = Em.Route.extend({
});
y
App.BarRoute = Em.Route.extend({
});
Si desea solucionarlo todo solo desde la URL raíz, puede devolverlo todo desde el enganche del modelo de la aplicación.
App.ApplicationRoute = Ember.Route.extend({
model: function() {
return {
colors: [''red'', ''yellow'', ''blue''],
news: [''Europe'', ''Asia'', ''America''],
business: [''Markets'', ''Finance'', ''Stocks''],
sports: [''golf'', ''hockey'', ''football'']
};
}
});
Y luego puede usar render desde la plantilla y proporcionarle un nombre de plantilla y un modelo.
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
<ul>
{{#each item in colors}}
<li>{{item}}</li>
{{/each}}
</ul>
<br>
{{render ''sports'' sports}}
<br>
{{render ''news'' news}}
<br>
{{render ''business'' business}}
<br>
{{outlet}}
</script>
Tengo otra respuesta que resuelve este problema en un enfoque más modular
En mi solución original
Estaba bajo la suposición de que cada controlador tiene su propia ruta y esa ruta se ocuparía de devolver los datos para ese controlador. Entonces, si incluyes los 3 controladores, cada uno de ellos se encargará de obtener su propio modelo. Pero tuve la suposición equivocada. Releí la “note on coupling” en embersjs http://emberjs.com/guides/controllers/ .
Entonces, lo que obtuve de esa documentación es que la ruta es responsable de obtener todos los modelos, pero debe decirle que la asigne a los controladores adicionales en esa ruta . También leo en modelos y accesorios http://emberjs.com/guides/models/the-fixture-adapter/
Mi nueva solución
- Me deshice de las rutas adicionales (por ahora)
- Se agregaron datos de color con los datos del dispositivo
- Aún conservo {{outlet}} Utilicé el gancho "setupController" en IndexRoute para conectar los controladores externos con los datos correctos. Esta es la clave
El motivo de este enfoque es que podría querer usar esos controladores "noticias", "negocios", "deportes" en otro lugar en la interfaz de usuario. Podría potencializar incluso configurar sus propias rutas en el futuro y creo que al usar los datos y los modelos de ascua ahora serán de ayuda.
Ver la solución JSBIN
tenga en cuenta que esta solución funciona en mi escritorio, pero JSBIN está lanzando un extraño error de Script 0 http://jsbin.com/gecarido/5/edit