Creando aplicaciones web con Ember.js

Question

Acabo de enterarme de Ember.js, y parece interesante. Me gustaría crear una aplicación de notas pequeñas para aprender a usarla.

El diseño básico que tengo en mente es tener categorías, y cada categoría puede tener notas. Para la interfaz de usuario, habría una barra lateral con las categorías en las que se podrá hacer clic, y las notas de la categoría se mostrarán en el otro lado.

Pero no puedo entender la plantilla completa/sistema de diseño. El sistema de plantillas en sí mismo parece lo suficientemente simple (lo suficientemente similar a las vistas de Rails). Pero, ¿qué haces para los diseños? Con Rails, por ejemplo, puede definir diseños con bastante facilidad y luego las vistas individuales se agregan a eso. Esto no me parece claro con Ember.js.

Answer 1

Para diseños simples de envoltura, puede usar el layout support incorporado en Ember. Solo es compatible con un solo {{yield}}, por lo que puede ser demasiado limitado para su aplicación.

Para algo un poco más robusto eche un vistazo a de ghempton Ember Layout. Creo que lo encontrará bastante similar a los diseños de Rails. Él tiene un live example here.

Finalmente, es bastante fácil crear una jerarquía de vistas en Ember (en lugar de o además de usar diseños). Tom Dale tiene una buena colección de recursos de Ember y ejemplos here.

Answer 2

Además de los enfoques @rharper mencionado, también puede utilizar el ayudante outlet, cosa que se ha introducido en comprometerse 5a4917b.

puede encontrar un ejemplo here:

Manillar:

<script type="text/x-handlebars" data-template-name="main" > 
    Main View 
    {{outlet contentView}} 
    {{outlet footerView}} 
</script> 

JavaScript:

App.viewController = Ember.Object.create({ 
    footerView: Ember.View.create({ 
     templateName: 'footer' 
    }), 
    contentView: Ember.View.create({ 
     templateName: 'content' 
    }) 
}); 

Ember.View.create({ 
    controllerBinding: 'App.viewController', 
    templateName: 'main' 
}).append(); 

Ember.run.later(function(){ 
    App.viewController.set('contentView', Ember.View.create({ 
     templateName: 'new-content' 
    })); 
}, 1000);