按照最新的ember

Question

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

我的（ember）应用程序包含模型，视图，控制器和描述我的UI的application.handlebars模板。

分解这个application.handlebars文件的最佳做法是什么，以便我可以管理用户界面？例如，我想在页面顶部安装导航。< / p>

我尝试使用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个部分（可以是任何数字）Header，Content＆amp;页脚，您可以执行以下操作

<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}}把手插入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>

在类似的行上让我展示 layoutName 属性和＆amp;的区别。 templateName 属性，

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

将导致以下HTML

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

使用这些概念在您的情况下拆分应用程序把手就像

partials

按照最新的ember

进行更新

新的ember支持{{partial}}类似于rails，现在我们可以修改上面的内容以使用{{partial "header"}} {{outlet}} {{partial "footer"}}，如下所示：

{{render}}

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

如果想要关联控制器，我们可以使用{{render "sidebar"}}帮助

App.SidebarController

在手柄中的指定位置插入名称为侧边栏的模板，此外它还会将{{render 'sidebar'}}与其关联，
注意：我们不能在同一个手柄文件中多次使用{{view}}。

但是如果你想使用一个小部件来查看给定页面中的多个位置，那么再次使用{{1}} 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

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

2 个答案:

按照最新的ember