Question

HTML

header

`<script type="text/x-handlebars" data-template-name="application">  
    {{view App.NavbarView}}  
    {{outlet}}  
</script>`  

footer

JS

`App.ApplicationController = Em.Controller.extend();  
App.ApplicationView = Em.View.extend({  
  templateName: 'application'  
});`  

App.Router = Em.Router.extend({
enableLogging: true,
location: 'hash',

root: Em.Route.extend({
  // EVENTS
  gotoAbout: Ember.Route.transitionTo('about'),

  // STATES
  about: Em.Route.extend({
    route: '/',
    connectOutlets: function (router, context) {
      router.get('applicationController').connectOutlet('about');
    }
  })

I want remove data-template-name="application" because i want show this immediately in the place where is this block of code (between header and footer).

But when i remove this and templateName: 'application' router dont work.

The question is: How to show block

<script type="text/x-handlebars" data-template-name="application">  
  {{view App.NavbarView}}  
  {{outlet}}  
</script>

between header and footer.

I know I can write <div id="content"></div> and use .appendTo("content") but maybe exist more optimal way?

Answer 1

Did you tried to set App’s rootElement property?

App = Ember.Application.create({
  rootElement: '#app-container'
});

You’ve got an example of this here, which you can easily derivate.