Search code examples
ember.jsember-cli

Wrapping ember.js body content in div

I'm trying to wrap the contents of my whole SPA ember.js page in a div with a special class ('container').

I've tried moving the handlebars into the new div as such, but it doesn't take effect on the outputted page.

<div class="container">
   {{content-for 'body'}}
   {{content-for 'body-footer'}}
</div>

Any ideas?

Solution

  • You need to add a rootElement: '#container to the app.js file. The rootElement needs to be an id too.

    Like so: 

    var App = Ember.Application.extend({
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix,
  Resolver: Resolver,
  rootElement: '#container',
});

    In your index.html file should look something like this:

      <body>
    <div id="container"></div>
    {{content-for 'body'}}

    <script src="assets/vendor.js"></script>
    <script src="assets/YOUR_APP_NAME.js"></script>

    {{content-for 'body-footer'}}
  </body>

    The ember app will be loaded into the container div.