使用Ember.js和Ember.Router将我的application.handlebars分解成单独的模板 [英] Break up my application.handlebars into separate templates using Ember.js and Ember.Router
问题描述
我正在使用 ember.js 和 ember-rails gem。
我的（ember）应用程序包含模型，视图，控制器和一个 application.handlebars 描述我的UI的模板。
分解这个 application.handlebars 文件的最佳做法是什么？以便我可以管理UI？例如，我想在页面顶部导航。
我尝试使用 Ember.Router ，单独的 navigation.handlebars （使用NavigationView和NavigationController） {{ outlet}} 帮助无效。路由器如下所示：
App.Router = Ember.Router.extend（
enableLogging：true
root：Ember.Route.extend（
index：
route：'/'
connectOutlets：（router，context）=>
router.get（'applicationController' ）.connectOutlet（'navigation'）
）
和 application.handlebars
< h1>我想要分解的许多HTML< / h1> ;
{{outlet}}
如果您需要更多信息，请告诉我...谢谢。
根据我的理解，让我们假设你想要3个部分（可以是任何数字）标题，内容和页脚你可以按照以下方式进行操作：
< script type =text / x-handlebarsdata-template-name =应用程序>
{{查看MyApp.HeaderView}}
{{＃查看MyApp.ContentView}}
{{outlet}}
{{/ view}}
{{查看MyApp.FooterView}}
< / script>
< script type =text / x-handlebarsdata-template-name =app-header>
所有您的标题相关HTML
< / script>
< script type =text / x-handlebarsdata-template-name =app-content>
与内容有关的HTML
{{yield}} //这将在结尾解释
如果你想要
< / script>更多的HTML
< script type =text / x-handlebarsdata-template-name =app-footer>
与页脚相关的HTML
< / script>
MyApp.HeaderView = Ember.View.extend（{
templateName：'app-header'
}）
MyApp。 ContentView = Ember.View.extend（{
templateName：'app-content'
}）
MyApp.FooterView = Ember.View.extend（{
templateName ：'app-footer'
}）
MyApp.ApplicationView = Ember.View.extend（{
templateName：'application'
}）
解释 {{yield}} 简而言之在给定视图的块助手之间的任何东西都在那里，在上面的 MyApp.ContentView 的示例中， {{outlet}在 {{＃查看MyApp.ContentView}}中定义的句柄被插入到 {{yield}}
在类似的行上，我可以显示 layoutName property& templateName 属性，
App.someView = Ember。 View.extend（{
tagName：'a'，
templateName：'a-template'，
layoutName：'a-container'
}）
< script type =text / x-handlebarsdata-template-name =a-template>
嗨有
< / script>
< script type =text / x-handlebarsdata-template-name =a-container>
< span class =container>
{{yield}}
< / span>
< / script>
将导致以下HTML
< a class =ember-viewid =ember235>
< span class =container ember-viewid =ember234>
嗨有
< / span>
< / a>
使用这些概念在您的情况下拆分应用程序句柄，就像
{{view App.NavigationView}}
{{outlet}}
根据最新的ember更新
新的ember支持 partials 类似于rails，现在我们可以修改以上使用 {{partial}} 如下：
<$
{{部分footer}}
当遇到此模板时，Ember将寻找名称为 _header （类似于rails）的模板，并插入模板如果要关联一个控制器，我们可以使用 {{render}} 帮助器
{{rendersidebar}}
在句柄中的指定位置插入名称为侧边栏的模板，它还关联了 App注意：我们不能使用 {{render'sidebar'}} 不止一次在同一个手柄文件中。
但是，如果要使用一个小部件，如同在一个给定页面中查看多个位置，则使用 {{view}} 帮助者
I'm building a front-end (on top of Ruby on Rails) using ember.js and the ember-rails gem.
My (ember) application consists of Models, Views, Controllers and an application.handlebars template which describes my UI.
Whats the best practice to break up this application.handlebars file so that I can manage the UI? For example, I'd like to have Navigation at the top of the page.
I've tried using the Ember.Router, a separate navigation.handlebars (with NavigationView and NavigationController) the {{outlet}} helper to no avail. Here's what the Router looks like:
App.Router = Ember.Router.extend(
enableLogging: true
root: Ember.Route.extend(
index:
route: '/'
connectOutlets: (router, context) =>
router.get('applicationController').connectOutlet('navigation')
)
and the application.handlebars
<h1>Lots of HTML that I want to break up</h1>
{{outlet}}
Let me know if you need more info...thanks.
As per my Understanding, Let's suppose you want 3 sections(can be any number) Header, Content & Footer, You can do something as follows
<script type="text/x-handlebars" data-template-name="application">
{{view MyApp.HeaderView}}
{{#view MyApp.ContentView}}
{{outlet}}
{{/view}}
{{view MyApp.FooterView}}
</script>
<script type="text/x-handlebars" data-template-name="app-header">
All your Header related HTML
</script>
<script type="text/x-handlebars" data-template-name="app-content">
HTML related to content
{{yield}} //this will be explained at the end
More HTML if you want
</script>
<script type="text/x-handlebars" data-template-name="app-footer">
HTML related to footer
</script>
MyApp.HeaderView = Ember.View.extend({
templateName: 'app-header'
})
MyApp.ContentView = Ember.View.extend({
templateName: 'app-content'
})
MyApp.FooterView = Ember.View.extend({
templateName: 'app-footer'
})
MyApp.ApplicationView = Ember.View.extend({
templateName: 'application'
})
explaining {{yield}} In a nutshell, whatever is between in the block helper of a given view goes in there, In the above example for the MyApp.ContentView, the {{outlet}} defined in the {{#view MyApp.ContentView}} handlebars gets inserted at the {{yield}}
On the similar lines let me show the difference between layoutName property & templateName property,
App.someView = Ember.View.extend({
tagName: 'a',
templateName: 'a-template',
layoutName: 'a-container'
})
<script type="text/x-handlebars" data-template-name="a-template">
Hi There
</script>
<script type="text/x-handlebars" data-template-name="a-container">
<span class="container">
{{yield}}
</span>
</script>
Will result in following HTML
<a class="ember-view" id="ember235">
<span class="container ember-view" id="ember234">
Hi There
</span>
</a>
Use these concepts to split the application handlebars in your case it would be something like
{{view App.NavigationView}}
{{outlet}}
Update as per latest ember
The new ember supports partials similar to rails, now we can modify the above to use {{partial}} as follows:
{{partial "header"}}
{{outlet}}
{{partial "footer"}}
Ember when encountered this template will look for the template whose name is _header(similar to rails) and inserts the template(same goes for footer)
And If want to associate a controller we can use {{render}} helper
{{render "sidebar"}}
inserts the template whose name is sidebar at specified location in handlebars besides it also associates App.SidebarController to it,
Note: we cannot use {{render 'sidebar'}} more than once in same handlebars file.
But again if you want to use a widget like view multiple places in a given page then use {{view}} helper
这篇关于使用Ember.js和Ember.Router将我的application.handlebars分解成单独的模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
