Question

I’m building a front-end (on top of Ruby on Rails) using ember.js and the ember-rails gem.

My (ember) application consists of Models, Views, Controllers and an application.handlebars template which describes my UI.

Whats the best practice to break up this application.handlebars file so that I can manage the UI? For example, I’d like to have Navigation at the top of the page.

I’ve tried using the Ember.Router, a separate navigation.handlebars (with NavigationView and NavigationController) the {{outlet}} helper to no avail. Here’s what the Router looks like:

App.Router = Ember.Router.extend(
  enableLogging:  true
  root: Ember.Route.extend(
    index:
      route: '/'
      connectOutlets: (router, context) =>
        router.get('applicationController').connectOutlet('navigation')
)

and the application.handlebars

<h1>Lots of HTML that I want to break up</h1>
{{outlet}}

Let me know if you need more info…thanks.

Answer 1

As per my Understanding, Let’s suppose you want 3 sections(can be any number) Header, Content & Footer, You can do something as follows

<script type="text/x-handlebars" data-template-name="application">
  {{view MyApp.HeaderView}}
  {{#view MyApp.ContentView}}
    {{outlet}}
  {{/view}}
  {{view MyApp.FooterView}}
</script>

<script type="text/x-handlebars" data-template-name="app-header">
  All your Header related HTML
</script>

<script type="text/x-handlebars" data-template-name="app-content">
  HTML related to content
  {{yield}} //this will be explained at the end
  More HTML if you want
</script>

<script type="text/x-handlebars" data-template-name="app-footer">
  HTML related to footer
</script>

MyApp.HeaderView = Ember.View.extend({
  templateName: 'app-header'
})


MyApp.ContentView = Ember.View.extend({
  templateName: 'app-content'
})

MyApp.FooterView = Ember.View.extend({
  templateName: 'app-footer'
})

MyApp.ApplicationView = Ember.View.extend({
  templateName: 'application'
})

explaining {{yield}} In a nutshell, whatever is between in the block helper of a given view goes in there, In the above example for the MyApp.ContentView, the {{outlet}} defined in the {{#view MyApp.ContentView}} handlebars gets inserted at the {{yield}}

On the similar lines let me show the difference between layoutName property & templateName property,

App.someView = Ember.View.extend({
  tagName: 'a',
  templateName: 'a-template',
  layoutName: 'a-container'
})

<script type="text/x-handlebars" data-template-name="a-template">
  Hi There
</script>

<script type="text/x-handlebars" data-template-name="a-container">
  <span class="container">
    {{yield}}
  </span>
</script>

Will result in following HTML

  <a class="ember-view" id="ember235">
    <span class="container ember-view" id="ember234">
      Hi There
    </span>
  </a>

Use these concepts to split the application handlebars in your case it would be something like

{{view App.NavigationView}}
{{outlet}}

Update as per latest ember

The new ember supports partials similar to rails, now we can modify the above to use {{partial}} as follows:

{{partial "header"}}
{{outlet}}
{{partial "footer"}}

Ember when encountered this template will look for the template whose name is _header(similar to rails) and inserts the template(same goes for footer)

And If want to associate a controller we can use {{render}} helper

{{render "sidebar"}}

inserts the template whose name is sidebar at specified location in handlebars besides it also associates App.SidebarController to it,

Note: we cannot use {{render 'sidebar'}} more than once in same handlebars file.

But again if you want to use a widget like view multiple places in a given page then use {{view}} helper