EmberJS pre2 put handlebar templates on wrong place

问题

I've try to update EmberJS from pre1 to pre2 on my web-app but I notice it put all handlebar templates as the last body elements, and sometime not at all.

I've create a repro with the starter-kit with simple modification of putting div before and after the template to show the template will be added in the wrong place. Run this same page with pre1 and it all works just fine.

index.html

....

<body>
  <div>this is before the template</div>
  <script type="text/x-handlebars" data-template-name="application">
    <h1>Hello from Ember.js</h1>
  </script>
  <div>this is after the template</div>

....

回答1:

The text/x-handlebars script tag defines a Handlebar template, and its irrelevant where you place it in the page (in the head, anywhere in the body).

In your code above you define the template for the ApplicationView. Since you use a router, ember automatically creates ApplicationView and appends it to the root element of your Ember app. By default, the rootElement is the body:

App.ApplicationView.create().appendTo(rootElement) // default rootElement = 'body'

and the appendTo method uses jQuery appendTo:

this.$().appendTo(target)

Therefore if you want to control where the applicationView is inserted you need to set the rootElement in the App instance, like so:

  window.App = Ember.Application.create({
    rootElement: '#insert_my_app_here'
  });

...

  <body>
    <div>this is before the template</div>
    <script type="text/x-handlebars" data-template-name="application">
      <h1>Hello from Ember.js</h1>
    </script>
    <div id="insert_my_app_here"></div>
    <div>this is after the template</div>
  </body>

来源：https://stackoverflow.com/questions/13324556/emberjs-pre2-put-handlebar-templates-on-wrong-place

标签

ember.js