Creazione di applicazioni Web con Ember.js

Question

Ho appena scoperto Ember.js e sembra interessante. Mi piacerebbe creare un'app per appunti di piccole dimensioni per imparare come usarlo.

Il layout di base che ho in mente è quello di avere categorie, e ogni categoria può avere note. Per l'interfaccia utente, ci sarebbe una barra laterale con le categorie che saranno cliccabili e le note per la categoria verranno visualizzate sull'altro lato.

Ma non riesco a capire l'intero modello/sistema di layout. Lo stesso sistema di template sembra abbastanza semplice (abbastanza simile alle viste di Rails). Ma cosa fai per i layout? Ad esempio, con Rails è possibile definire facilmente i layout e quindi aggiungere le singole viste. Questo mi sembra poco chiaro con Ember.js.

Answer 1

Per semplici layout in stile wrapper è possibile utilizzare il layout support integrato di Ember. Supporta solo un singolo {{yield}} quindi potrebbe essere troppo limitato per la tua applicazione.

Per qualcosa di un po 'più robusto dai un'occhiata a ghempton's Ember Layout. Penso che lo troverai abbastanza simile ai layout di Rails. Ha un live example here.

Infine, è abbastanza facile creare una gerarchia di viste in Ember (anziché o in aggiunta all'utilizzo di layout). Tom Dale ha una buona collezione di risorse Ember ed esempi here.

Answer 2

Oltre agli approcci @rharper accennato, è anche possibile utilizzare il outlet aiutante, wich è stato introdotto nel commettere 5a4917b.

È possibile trovare un esempio here:

Manubrio:

<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);