web-dev-qa-db-ja.com

ember.js +ハンドルバー：レンダリングvsアウトレットvsパーシャルvsビューvsコントロール

それぞれの周りに散らばった説明がありますが、私はまだ違いと使用法について100％明確ではありません。誰かが私に並べて比較してもらえますか？

{{outlet}}
{{outlet NAME}}
{{render}}
{{partial}}
{{view}}
{{control}}

注： この投稿 は、部分vsレンダリングで非常に役立ちました

javascriptember.jshandlebars.js
53
doub1ejack

これらはすべて、emberjsガイドで説明されている次の主な特徴を持つテンプレートヘルパーです。 （ http://emberjs.com/guides/templates/rendering-with-helpers/ ）

1 .{{outlet}}-ルーターによって決定されたルートに基づいてテンプレートをレンダリングします。ルートに基づいて、対応するコントローラーとビューが使用されます。 これは、最も一般的なケースであるルートに基づいてコンテンツをレンダリングするときに役立ちます。

2 .{{outlet NAME}}-コンテンツを正確にレンダリングするルートを指定する機能を提供します。 ルートの複数のテンプレートからコンテンツをレンダリングしようとする場合に便利です。

3 .{{render}}-outletに似ていますが、コントローラー/ビュー/モデルはヘルパーから直接または間接的に指定できます。コンテキスト（ビュー/コントローラー）とモデルをオーバーライドする機能を備えた複数のテンプレートからコンテンツをレンダリングする必要がある場合に役立ちます。モデルが指定されている場合、対応するコントローラーの一意のインスタンスが使用されます。指定されていない場合、シングルトンインスタンスが使用されます。 複数のテンプレートコンテンツをレンダリングする際に、ルートのコンテキストとモデルをオーバーライドする必要がある場合に便利です。

4 .{{control}}-シングルトンコントローラーを再利用する代わりに、呼び出しごとに新しいコントローラーインスタンスを使用することを除いて、renderと同様に機能します。 renderを使用する場合、モデルを指定せずに同じルートに複数のレンダーを使用することはできません。その場合は、controlを使用する必要があります。 レンダリングされたすべてのテンプレートコンテンツに対してコントローラの新しいインスタンスをサポートするのに役立ちます。

更新：コントロールヘルパーが削除されました https://github.com/emberjs/ember.js/commit/86eecd7ef7cdc7d2ea6f77b3a726b293292ec55d .

5 .{{partial}}-テンプレートを引数としてレンダリングし、そのテンプレートを所定の位置にレンダリングします。コンテキストやスコープは変更されません。指定されたテンプレートを現在のスコープの所定の場所にドロップするだけです。そのため、パーシャルにはビュークラスが指定されていません。 ビュークラスを作成せずに、制御または再利用性を向上させるために、テンプレートをテンプレートモジュールに分割する必要がある場合に便利です。

6 .{{view}}-これは部分的に機能しますが、ビュークラスが提供されます。ビュークラスは、使用するテンプレートを指定します。 テンプレートをモジュールに分割するときにビュークラスが必要な場合などに便利です。イベント処理用

7。{{#view}}-ビューヘルパーのブロック形式もあり、親ビューテンプレートとインラインで子ビューのテンプレートを指定できます。 （ http://emberjs.com/guides/views/inserting-views-in-templates/ ）

85
melc

{{outlet}}これは、ルートのテンプレート内でネストされたリソース/ルートがレンダリングされる場所を定義します

{{outlet NAME}}これは、プログラムで何かをレンダリングできる名前付きアウトレットを作成します

App.PostRoute = App.Route.extend({
  renderTemplate: function() {
    this.render('favoritePost', {   // the template to render
      into: 'posts',                // the route to render into
      outlet: 'posts',              // the name of the outlet in the route's template
      controller: 'blogPost'        // the controller to use for the template
    });
    this.render('comments', {
      into: 'favoritePost',
      outlet: 'comment',    
      controller: 'blogPost'
    });
  }
});

{{render}}は2つのパラメーターを取ります。

最初のパラメーターは、セットアップするコンテキストを記述します。オプションの2番目のパラメーターはモデルであり、提供される場合はコントローラーに渡されます。

{{render}}はいくつかのことを行います：

モデルが提供されない場合、対応するコントローラーのシングルトンインスタンスを取得します。モデルが提供される場合、対応するコントローラーの一意のインスタンスを取得しますこのコントローラーを使用して名前付きテンプレートをレンダリングします対応するコントローラーのモデルを設定します

{{partial}}は、テンプレートを引数としてレンダリングし、そのテンプレートを所定の位置にレンダリングします（現在のスコープをコンテキストとして使用）。

{{view}}このヘルパーは部分ヘルパーと同様に機能しますが、現在のテンプレート内にレンダリングされるテンプレートを提供する代わりに、ビュークラスを提供します。ビューは、レンダリングされるテンプレートを制御します。

{{control}} isdeprecatedは、シングルトンコントローラを再利用する代わりに、呼び出しごとに新しいコントローラインスタンスを使用することを除いて、renderと同様に機能します。

ほとんどの場合、ドキュメントからコピーして貼り付けました： http://emberjs.com/guides/templates/rendering-with-helpers/

9
Kingpin2k
  1. renderヘルパーはv2.xで非推奨になりました。代わりに ember-elsewhere addonを使用する必要があります。 https://emberjs.com/deprecations/v2.x/#toc_rendering-into-a-render-helper-that-resolves-to-an-outlet
  2. ember.viewはv1.xでは非推奨です。代わりに Component を使用してください。参照 https://emberjs.com/deprecations/v1.x/#toc_ember-view
  3. controlヘルパーは実験的なもので、既に削除されています

現在は{{outlet}}は、残りのすべてが非推奨/削除されることをお勧めします。

2
Ember Freak

主な違いは

{{view}}利用可能なはずの提供されたビュークラスをレンダリングします

{{partial}}は、Ember.TEMPLATESで使用可能なテンプレートをレンダリングします。ビュークラスに関連していない可能性があります。利点は、テンプレートのコンテキストが親ビューに残ることです。

{{outlet}}ここで提供されたビューまたはテンプレートをレンダリングすることになっているルーターを指定するか、renderTemplate（）フックに従ってルーターを指定します。

{{outlet NAME}} 2つのビュー/テンプレートを異なる位置にレンダリングする場合に便利です。コンセントに名前を付けて、ルーターにレンダリングを依頼できます。

{{render}}アウトレットと同じですが、特定のビュー/テンプレートをルーターに強制的にレンダリングさせる点が異なります。

0
thecodejack