17

コントローラーにウィジェット オブジェクトの配列があり、各ウィジェット オブジェクトにはコンポーネント クラスの名前が割り当てられたメンバー変数があるとします。テンプレートでそのコンポーネントを呼び出すにはどうすればよいですか?

//widgets[0].widget.componentClass="blog-post"

{{#each widget in widgets}}
    {{widget.componentClass}}
{{/each}}

明らかに、上記の例は、ウィジェット コンポーネント クラスの一連の文字列バージョンを吐き出すだけです。ただし、これは機能します (すべてが正しく設定されている限り)。

//widgets[0].widgets.viewClass="blogPost"

{{#each widget in widgets}}
    {{view widget.viewClass}}
{{/each}

これは以前の実装でしたが、満足していませんでした。現在、ここで説明されているように、カスタム {{renderWidget ...}} タグをハンドルバー ヘルパーと共に使用しています:変数名でハンドルバー {{render}} を呼び出す。デフォルトのレンダリング ヘルパーには、変数名の内容に対してレンダリングを呼び出さないという同様の問題があります。カスタム コンポーネントのハンドルバー ヘルパーを作成したいと思っていますが、どこから始めればよいかわかりません。ありがとう。

4

4 に答える 4

12

私はこれを試してみましたが、うまくいくようですが、私の側では推測にすぎません:

Ember.Handlebars.registerHelper('renderComponent', function(componentPath, options) {
  var component = Ember.Handlebars.get(this, componentPath, options),
      helper = Ember.Handlebars.resolveHelper(options.data.view.container, component);

  helper.call(this, options);

});

同じように使用します。

{{#each widget in widgets}}
  {{renderComponent widget.componentClass widget=widget}}
{{/each}}
于 2014-02-05T22:57:33.810 に答える
11

Ember 1.11 では、新しいcomponentヘルパーにより次のことが可能になります。

{{#each widget in widgets}}
  {{component widget.componentClass}}
{{/each}}

2015 年 1 月 19 日現在、1.11 は安定版リリースではありませんが、この機能はカナリア バージョンに含まれています。

于 2015-01-20T01:52:15.687 に答える
6

私はあなたと同じ問題にたくさん遭遇したようです。すべてのコンポーネントはトップ レベルのヘルパーとして登録されています。つまり、ルックアップを行うハンドルバー ヘルパーを作成するためにリンクした方法と同様の方法を実行できます。このような：

Ember.Handlebars.registerHelper('lookup', function(component, options) {
  component = Ember.Handlebars.get(this, component, options);
  Ember.Handlebars.helpers[component].call(this, options);
});

次に、テンプレートで：

{{#each widget in widgets}}
  {{lookup widget.componentClass}}
{{/each}}

これは、実際の例を含む jsbin です: http://jsbin.com/ucanam/2482/edit

それが役立つことを願っています!

- 編集 -

何らかの理由で、ハンドルバーの新しいバージョンでは、他のヘルパーからヘルパーを呼び出すことができなくなります。Ember.TEMPLATES代わりに、グローバルを介してテンプレートを検索できます。このメソッドを使用するように JSBin を更新しました。

経由でテンプレートを取得することもできますが、options.data.view.templateForName(component)よりも少し脆弱に感じEmber.TEMPLATESます。

-- 編集 2 --

また変わった。Ember.Handlebars.resolveHelperが正しい方法になりました。@StrangeLooperの回答を参照してください。

于 2013-10-18T05:01:58.393 に答える