什么ember.js组件负责将模板插入到DOM中？ [英] What ember.js component is responsible for inserting templates into the DOM?
问题描述
现在我只能将我的模板附加到< body> 我有一个 jsFiddle这里。
我知道在Ember.Application上设置 rootElement ，但是我想让应用程序控制页面的其他元素。 / p>
Handlebars / HTML ：
< script type =text / x-handlebarsdata-template-name =application>
< h2>我是内容< / h2>
< p>这应该在标题& amp; amp; amp;页脚< / p为H.
< p>< strong>时间< / strong> {{时间}}< / p为H.
< / script>
< header>
< h1>应用< / h1>
< / header>
< article>
< div id =content>< / div>
< / article>
< footer>
< a href =http://blog.deanbrundage.comtarget =_ blank>由Dean< / a>
< / footer>
JavaScript ：
window.App = Ember.Application.create（）;
App.Router = Em.Router.extend（{
initialState：'root.home'，
root：Em.Route.extend（{
home： Em.Route.extend（{
view：App.ApplicationView
}）
}）
}）;
App.ApplicationController = Em.Controller.extend（{
time：Date（）
}）;
App.ApplicationView = Em.View.extend（{
templateName：'application'
}）;
App.initialize（）;
Ember.js中的当前实现追加 ApplicationView 到应用程序的 rootElement ，请参阅 here 。
一个可能的解决方案是覆盖 ApplicationView 的 appendTo ，请参阅 http://jsfiddle.net/pangratz666/m8L6Z/ ：
JavaScript ：
App.ApplicationView = Em.View.extend（{
templateName：'application'，
appendTo：function（）{
this._super（'＃content'）;
}
}）;
I am building an ember.js/rails application. All the handlebar templates are stored in .js files. I'd like to understand how they get inserted into the DOM when the router changes state. Which part of ember does this? How do I tell ember to place templates?
Right now I can only get my templates appended to the <body> I have a jsFiddle here.
I am aware of setting rootElement on Ember.Application, however I want the app to control other elements of the page.
Handlebars / HTML:
<script type="text/x-handlebars" data-template-name="application">
<h2>I'm the content</h2>
<p>This should be inbetween the header & footer</p>
<p><strong>time</strong> {{time}}</p>
</script>
<header>
<h1>Application</h1>
</header>
<article>
<div id="content"></div>
</article>
<footer>
<a href="http://blog.deanbrundage.com" target="_blank">by Dean</a>
</footer>
JavaScript:
window.App = Ember.Application.create();
App.Router = Em.Router.extend({
initialState: 'root.home',
root: Em.Route.extend({
home: Em.Route.extend({
view: App.ApplicationView
})
})
});
App.ApplicationController = Em.Controller.extend({
time: Date()
});
App.ApplicationView = Em.View.extend({
templateName: 'application'
});
App.initialize();
The current implementation in Ember.js appends the ApplicationView to the rootElement of the Application, see here.
One possible solution would be to overwrite the appendTo of your ApplicationView, see http://jsfiddle.net/pangratz666/m8L6Z/:
JavaScript:
App.ApplicationView = Em.View.extend({
templateName: 'application',
appendTo: function(){
this._super('#content');
}
});
这篇关于什么ember.js组件负责将模板插入到DOM中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
