Creating Web applications with 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);

​