Ember.js - multiple views on same page

0
votes

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.

1
javascriptember.js

1 Answers

0
votes

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/