EmberJS: Multiple templates, one page

Question

I have a website that is largely rendered by Ruby on Rails, with several sections the page using Ember. Up until now, we have been using separate ember apps to manage each section, but that's starting to create too much multi-app overhead.

Is there a way to attach the Ember app to the body (as the rootElement) and have each section build as independent components or views, without having to wrap the body in a script tag?

The current modules we have: * Shopping cart summary * Account details & menu in the header * And a few others

There's now a requirement to duplicate the account details section in another part of the page. The only way to do this today would be to attach the account app to an element that wraps both sections...but then this would also wrap the cart summary area and cause that app to fail.

Ideally I'd like to be able to combine all these apps and just tell Ember where to put the views on the page. Is this possible?

score 0 · Answer 1 · edited May 23 '17 at 12:27

If i get you correctly, you have something like that (thx http://asciiflow.com/ for the schema) :

+-index.html-------+---+--------+---------+-+
|  +------menu.html|   +---------cart.html| |
|  |   Ember App   |   |     Ember App    | |
|  |               |   |                  | |
|  +---+---------+-+   +-------+-+--------+ |
|  +----main.html--+---+-------+ |else.html |
|  |                           | |        | |
|  |                           | | Ember  | |
|  |     Ember App             | |  App   | |
|  |                           | |        | |
|  |                           | |        | |
|  |                           | |        | |
|  |                           | |        | |
|  |                           | |        | |
|  |                           | |        | |
|  |                           | |        | |
|  |                           | |        | |
|  |                           | |        | |
|  |                           | +--------+ |
|  |                           |            |
|  |                           |            |
|  |                           |            |
|  |                           |            |
|  |                           |            |
|  |                           |            |
|  |                           |            |
|  |                           |            |
|  |                           |            |
|  +---------------------------+            |
+--+---------------------------+------------+

If so, you indeed have 2 options.

Either you use named outlet (example, documentation) To do this, each of the indexes of your various apps would have to be moved to a template named after its feature role or position for instance.

In a nutshell (in the main index.html, position name approach):

<div class="header-left">{{outlet headerleft}}</div>
<div class="header-right">{{outlet headerright}}</div>  
<div class="sidebar">{{outlet sidebar}}</div>
<div class="main">{{outlet main}}</div>

And in your IndexRoute :

App.IndexRoute = App.Route.extend({
  renderTemplate: function() {
    this.render('headerleftTpl', {// the template to render
      into: 'index',              // the template to render into
      outlet: 'headerleft',       // the name of the outlet in that template
      controller: 'HeaderLeftCtrl'// the controller to use for the template
    });
    this.render('headerrightTpl', {
      into: 'index',
      outlet: 'index',
      controller: 'HeaderRightCtrl'
    });
   // And so on
  }
});

Or you use component, which is also a nice(r) solution in term of architecture.

However, this will require a lot of refactoring to convert all your apps into components.

And the philosophy behind components is that they should be quite isolated so it might not fit your purpose (for this part, I can't know for you)

Here is a nice tutorial to convert a view into a Component.

Note that in both cases, it will be a quite some work to convert. My first impression is that it's easier to move to a named outlet first and then try to move toward the component solution which tends to be the new standard with Web Components.

Love the ASCII layout! Yes, this is basically what I'm trying to do, except without having the entire page be a handlebars template. Each of those "Ember App" sections in the layout will be independent handlebar templates, because main.html might be rendered by Rails, not Ember, and we need to keep the SEO. — Jeremy Gillick, Dec 19 '14 at 18:33

score 0 · Accepted Answer · answered Feb 10 '15 at 22:19

I have prototyped something that seems to work. You make the rootElement the body and then use childView.appendTo($('.some-element')); to put the Ember view where you want.

Instead of doing it manually, you can create a few custom script blocks (type="text/x-ember-view") that automate that for you.

Demo: http://emberjs.jsbin.com/motile/7/edit?html,js,output

EmberJS: Multiple templates, one page

2 Answers2