使用Ember.js和Ember.Router将我的application.handlebars拆分为单独的模板

Question

我正在使用ember.js和ember-railsgem 构建一个前端(在Ruby on Rails之上).

我的(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>Lots of HTML that I want to break up</h1>
{{outlet}}

如果您需要更多信息,请告诉我...谢谢.

Answer 1

根据我的理解,让我们假设你想要3个部分(可以是任何数字)标题,内容和页脚,你可以做如下的事情

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

解释{{yield}}简而言之,在给定视图的块帮助器之间的任何内容都在那里,在上面的示例中MyApp.ContentView,{{outlet}}在把手中定义的{{#view MyApp.ContentView}}插入在{{yield}}

类似的行上让我显示layoutName属性和templateName之间的区别属性,

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>

将导致以下HTML

  <a class="ember-view" id="ember235">
    <span class="container ember-view" id="ember234">
      Hi There
    </span>
  </a>

使用这些概念来分割应用程序把手,就像你的情况一样

{{view App.NavigationView}}
{{outlet}}

根据最新的余烬更新

新的ember支持partials类似rails,现在我们可以修改上面使用{{partial}}如下:

{{partial "header"}}
{{outlet}}
{{partial "footer"}}

Ember遇到此模板时将查找名称为_header的模板(类似于rails)并插入模板(同样适用于页脚)

如果想要关联一个控制器,我们可以使用{{render}}帮助器

{{render "sidebar"}}

将名称为侧边栏的模板插入手柄中的指定位置,此外它还与之关联App.SidebarController,
注意:我们不能{{render 'sidebar'}}在同一个手柄文件中多次使用.

但是,如果你想使用一个小部件来查看给定页面中的多个位置,那么再次使用{{view}}帮助器