我尝试在我的网络应用程序上将EmberJS从pre1更新为pre2,但我注意到它将所有车把模板作为最后的车身元素,有时根本没有.
我使用starter-kit 创建了一个repro,只需在模板前后放置div,就可以显示模板将被添加到错误的位置.使用pre1运行同一页面,一切正常.
的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>
....
text/x-handlebars脚本标签定义了Handlebar模板,它与您在页面中放置的位置无关(在头部,身体的任何位置).
在上面的代码中,您可以定义模板ApplicationView.由于您使用路由器,余烬自动创建ApplicationView和附加到您的灰烬应用程序的根元素.默认情况下,rootElement是正文:
App.ApplicationView.create().appendTo(rootElement) // default rootElement = 'body'
并且该appendTo方法使用jQuery appendTo:
this.$().appendTo(target)
因此,如果要控制applicationView插入的位置,则需要rootElement在App实例中进行设置,如下所示:
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>