17

目標は、呼び出し元によって宣言されたコンテンツの複数のブロックを持つ HTML の構造を定義することです。たとえば、ヘッダー、本文、およびコンテンツです。結果のマークアップは次のようになります。

<header>My header</header>
<div class="body">My body</div>
<footer>My footer</footer>

コンポーネントをインスタンス化するテンプレートは、My header、My body、およびの 3 つのセクションをそれぞれ定義しますMy footer。

Ruby on Rails ではcontent_for :header、呼び出し元からヘッダー コンテンツをキャプチャし、それyield :headerを補間するために使用します。

これはember.jsで可能ですか?

4

2 に答える 2

19

ember v1.10 以降、yield はパラメーターを受け入れます。ただし、ハンドルバーでは、変数値のインライン比較はまだ許可されていません。コンポーネントにいくつかのプロパティを定義することで、Rails の機能にかなり近づけることができます。

上記の例では、コンポーネントのテンプレートは次のようになります。

<header>{{yield header}}</header>
<div class="body">{{yield body}}</div>
<footer>{{yield footer}}</footer>

そして、コンポーネント定義は、変数引数を yield ステートメントに解決します。

export default Ember.Component.extend({
  header: {isHeader: true},
  footer: {isFooter: true},
  body:   {isBody: true}
});

これは、{{yield header}}実際にオブジェクト{isHeader: true}を使用中のテンプレートに譲っていることを意味します。したがって、ネストされた if/else 構造を使用して、次のように 3 つのセクションを宣言できます。

{{#my-comp as |section|}}
  {{#if section.isHeader}}
    My header
  {{else if section.isBody}}
    My body
  {{else if section.isFooter}}
    My footer
  {{/if}}
{{/my-comp}}
于 2015-05-17T01:20:13.923 に答える
6

以前の回答は古くなっている可能性があります。

この問題について承認された RFC があります。Named Templates Block APIは、複数のブロックをコンポーネントに渡すことをサポートします。

Ember 2.3 の時点で、コンテキスト コンポーネントはこのケースに対する別のアプローチを可能にします。

コンポーネントを複数のサブコンポーネントに分割し、サブコンポーネントをブロック パラメーターとしてコンポーネントに戻します。この設定により、各サブコンポーネント ブロックのコンテンツを設定できます。

Twiddle-fullの例を確認してください。

// my-component.js

{{yield (hash
   header = (component 'my-header')
   content = (component 'my-content')
   footer = (component 'my-footer')
)}}
{{#unless hasBlock}}
   {{my-header}}
   {{my-content}}
   {{my-footer}}    
{{/unless}}

// my-{header/content/footer}.js

{{#if hasBlock}}
   {{yield}}
{{else}}
   Default xxxxx
{{/if}}

この場合、デフォルトのコンポーネント コンテンツを使用するか、特定のコンテンツを次のようなサブコンポーネントに渡すことができます。

{{my-component}}



{{#my-component as |f|}}
  {{f.header}}
  {{#f.content}}
    Custom content
  {{/f.content}}
  {{f.footer}}
{{/my-component}}


{{#my-component as |f|}}
  {{#f.header}}
     Custom header
  {{/f.header}}
  {{#f.content}}
     Custom content
  {{/f.content}}
  {{#f.footer}}
     Custom footer
  {{/f.footer}}
{{/my-component}}

このソリューションは、コンポーネントの API/構造を強制するものではありません。サブコンポーネントが省略されたり、複数回追加されたり、順序が間違っていたりすると、コンポーネントが誤って使用される可能性があります。これらの場合、コンポーネントは望ましくないコンテンツを生成します。

Twiddle-fullの例を確認してください。

于 2018-09-20T12:22:56.270 に答える