什麼ember.js組件負責將模板插入到DOM中？

我正在構建一個ember.js/rails應用程序。所有的車把模板都存儲在.js文件中。我想知道當路由器改變狀態時他們是如何插入DOM的。 餘燼的哪個部分這樣做？我該如何告訴ember放置模板？什麼ember.js組件負責將模板插入到DOM中？

現在我只能將我的模板追加到<body>我有一個jsFiddle here。

我知道在Ember.Application上設置rootElement，但是我希望應用程序能夠控制頁面的其他元素。

把手/ HTML：

<script type="text/x-handlebars" data-template-name="application"> 
    <h2>I'm the content</h2> 
    <p>This should be inbetween the header &amp; 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();

來源

2012-06-24 Dean Brundage

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'); 
    } 
});

來源

2012-07-02 16:55:17 pangratz

感謝您的細節。我最感興趣的是最後的解決方案（http://jsfiddle.net/pangratz666/Yu3BX/）將視圖附加到現有的HTML頁面。這可以用'Router'完成，還是我堅持把整個頁面放到一個句柄模板中？ –

由於所述信息未能解決您的問題，因此我已更新了我的回答。 – pangratz

如果我只是新的這一天前..現在我浪費了一天把我的整個網站在把手:) – Stephan

如果您是使用主，插入和模板的改變是通過網點辦理。結賬the official guide。

如果您使用的是較舊版本的Ember，那更像是一個手動過程。

來源

2012-06-25 01:44:19

我明白網點。如何將**第一個**模板添加到DOM中？看看jsFiddle。 –

什麼ember.js組件負責將模板插入到DOM中？

回答

相關問題