2

ember.js我正在使用和ember-railsgem构建前端（在 Ruby on Rails 之上） 。

我的（ember）应用程序由模型、视图、控制器和application.handlebars描述我的 UI 的模板组成。

分解此application.handlebars文件以便我可以管理 UI 的最佳做法是什么？例如，我想在页面顶部有导航。

我尝试使用Ember.Router单独的navigation.handlebars （带有 NavigationView 和 NavigationController）的{{outlet}}helper 无济于事。这是路由器的外观：

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

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

4

2 回答 2

11

根据我的理解，假设您想要 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}}helper

{{render "sidebar"}}

在handlebars中的指定位置插入名称为sidebarApp.SidebarController的模板，此外它也与之关联，
注意：我们不能{{render 'sidebar'}}在同一个handlebars文件中多次使用。

但是，如果您想使用小部件，例如查看给定页面中的多个位置，请使用{{view}}帮助程序

于 2012-12-29T13:36:44.220 回答
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不是ObjectControllerArrayController

于 2012-12-29T08:15:24.653 回答