Ember.js - multiple views on same page

Question

Just starting to learn Ember.js, and evaluating if it fits into my project.

I have multi page application, and on each I have different content (components) that can be reused across pages. For a simplistic approach lets consider that is is a something like Recipe blog

Main page:

• Recipes (loaded via Ember)
• Popular recipes block (loaded via Ember)
• Product reference guide block (loaded via Ember)

Single Recipe page:

• Recipe contents (simple html rendered by back end)
• Comments block (loaded via Ember)
• Product reference guide block (loaded via Ember)

Product/ingredient view:

• Product contents (simple html rendered by back end)
  Comments block (loaded via Ember)
  Product reference guide block (loaded via Ember)

• etc..

So basically I have small reusable components

1. Comments
2. Product reference guide
3. Popular recipes

I want them all to be loaded independently, and I want to include them on different pages and their position would would depend on page type. And I would like to have independent events for each of those components

Skipping through the docs, I think there are couple of solutions:

1) Use different Ember application for each of my component: Example 1

<script type="text/x-handlebars" data-template-name='app1-view'>
I am the App1 main view
</script>
<script type="text/x-handlebars" data-template-name='app2-view'>
I am the App2 main view
</script>

2) Use partials (can partial be bound to controller and have actions like loadNextPage, etc?) Example 2

{{partial 'navbar'}}
{{outlet}}   
{{partial 'footer'}}

3) Use named outlets Example 3

{{outlet header}}
{{outlet body}}
{{outlet navBar}}

4)...?

Or maybe Ember is more suited for single page apps? I do not want to use jquery ui widgets, and have that bind/unbind and dom manipulation mess.

Answer 1

Use views:

Views in Ember.js are typically only created for the following reasons:

When you need sophisticated handling of user events

When you want to create a re-usable component

Create a view per reusable component and bind it to the right templates whenever needed.

And let Ember handle the lifecycle of views and contexts for you!

For more info, read: http://emberjs.com/guides/views/