Creating Web applications with Ember.js - ember.js

Question

I've just found out about Ember.js, and it looks interesting. I'd like to create a small notes app to learn how to use it.
The basic layout I have in mind is to have categories, and each category can have notes. For the UI, there would be a sidebar with the categories which will be clickable, and the notes for the category will be displayed on the other side.
But I can't quite figure out the whole template/layout system. The template system itself seems simple enough (similar enough to Rails views). But what do you do for layouts? With Rails for example, you can define layouts quite easily and then the individual views are added to that. This seems unclear to me with Ember.js.

Answer 1

Besides the approaches #rharper mentioned, you can also use the outlet helper, wich has been introduced in commit 5a4917b.
You can find an example here:
Handlebars:
<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);
​

Answer 2

For simple wrapper-style layouts you can use Ember's built-in layout support. It only supports a single {{yield}} so may be too limited for your application.
For something a little more robust take a look at ghempton's Ember Layout. I think you'll find it quite similar to Rails layouts. He has a live example here.
Finally, it's fairly easy to create a hierarchy of views in Ember (instead of or in addition to using layouts). Tom Dale has a good collection of Ember resources and examples here.