2

gemを使用ember.jsして(Ruby on Rails の上に) フロントエンドを構築しています。ember-rails

私の (ember) アプリケーションは、モデル、ビュー、コントローラー、およびapplication.handlebarsUI を説明するテンプレートで構成されています。

application.handlebarsUI を管理できるように、このファイルを分割するベスト プラクティスは何ですか? たとえば、ナビゲーションをページの上部に配置したいと考えています。

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

さらに情報が必要な場合はお知らせください...ありがとう。

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}}が に挿入されます。同様の行で、 layoutNameプロパティとtemplateName{{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>


次のHTMLになります

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

これらの概念を使用して、アプリケーションのハンドルバーを次のように分割します。

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

最新の残り火ごとに更新

新しい ember はpartialsRails と同様にサポートします。これで、上記を{{partial}}次のように変更して使用できます。

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

Ember は、このテンプレートに遭遇すると、名前が_header (レールに似ています)のテンプレートを探し、テンプレートを挿入します (フッターも同様です)。

コントローラーを関連付けたい場合は、{{render}}ヘルパーを使用できます

{{render "sidebar"}}

sidebarという名前のテンプレートをハンドルバーの指定された場所に挿入し、App.SidebarControllerそれに関連付けます。
注:{{render 'sidebar'}}同じハンドルバー ファイルで複数回使用することはできません。

ただし、特定のページで複数の場所を表示するなどのウィジェットを使用する場合は、{{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ありObjectControllerます。ArrayController

于 2012-12-29T08:15:24.653 に答える