使用Ember.js和Ember.Router將我的application.handlebars拆分為單獨的模板

Question

我正在使用ember.js和ember-rails gem構建一個前端（在Ruby on Rails之上）。

我的（ember）應用程序由模型，視圖，控制器和描述我的UI的application.handlebars模板組成。

什么是分解這個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示例中， {{#view MyApp.ContentView}} {{outlet}}定義了{{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}}

根據最新的余燼更新

新的余燼支持partials相似的軌道，現在我們可以修改上面使用{{partial}}如下：

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

Ember遇到此模板時將查找名稱為_header的模板（類似於rails）並插入模板（同樣適用於頁腳）

如果想關聯控制器，我們可以使用{{render}}幫助器

{{render "sidebar"}}

將名稱為側邊欄的模板插入手柄中的指定位置，此外它還將App.SidebarController與之關聯，
注意：我們不能在同一個手柄文件中多次使用{{render 'sidebar'}} 。

但是，如果你想使用一個小部件來查看給定頁面中的多個位置，那么請使用{{view}} helper

Answer 2

對於這個問題，您需要做的是考慮哪些視圖發生了變化以及發生了哪些變化。 例如，如果您有導航部分和主要部分，那么請考慮每個部分如何隨應用程序的狀態而變化。 確保只為動態內容創建{{outlet}} ，否則事情會變得混亂，應用程序會變慢。 然后設置模板和路由器，類似於下面的示例。

模板：

<script type="text/x-handlebars" data-template-name="application">
    <!--Your application template goes here-->
    {{outlet navigation}}
    {{outlet body}}
</script>
<script type="text/x-handlebars" data-template-name="navigation">
    <!--Your navigation template goes here-->
</script>
<script type="text/x-handlebars" data-template-name="main-one">
    <!--Your mainOne template goes here-->
</script>
<script type="text/x-handlebars" data-template-name="main-two">
    <!--Your mainTwo template goes here-->
</script>

注意：您可以在任何視圖模板中使用{{outlet}}來更改更多子狀態

使用Javascript：

window.App = Em.Application.create({
    ApplicationView: Em.View.extend({
        templateName: "application"
    }),
    ApplicationController: Em.Controller.extend({
    }),
    NavView: Em.View.extend({
        templateName: "navigation"
    }),
    NavController: Em.Controller.extend({
    }),
    MainOneView: Em.View.extend({
        templateName: "main-one"
    }),
    MainOneController: Em.Controller.extend({
    }),
    MainTwoView: Em.View.extend({
        templateName: "main-two"
    }),
    MainTwoController: Em.Controller.extend({
    })
    Router: Em.Router.extend({
        root: Em.Route.extend({
            index: Em.Route.extend({
                route: '/',
                connectOutlets: function(router,context) {
                    router.get("applicationController").connectOutlet("navigation","nav");
                    router.get("applicationController").connectOutlet("body","mainOne");
                }
            }),
            otherState: Em.Route.extend({
                route: '/other-state',
                connectOutlets: function(router,context) {
                    router.get("applicationController").connectOutlet("navigation","nav");
                    router.get("applicationController").connectOutlet("body","mainTwo");
                }
            }),

        })
    })
});
App.initialize();

注意： applicationController必須擴展Controller而不是ObjectController或ArrayController