21

テンプレートを明示的に指定せずに、テンプレートを動的にロードできるようにしたいと思います。

例として：

<template name="foo">
</template>

'foo'はテンプレートですが、メソッドを呼び出して動的にロードできるようにしたいと思います。

Meteor.render(Meteor.loadTemplate('foo'));

これは可能ですか？

4

10 に答える 10

13

Meteor 0.9.x 新しい API

Dan Dascalescu は、Meteor に動的テンプレートが組み込まれていることを指摘しました。以前のバージョンで見られた余分なコードを含める必要がないため、これは便利です。

{{> Template.dynamic template=template [data=data] }}

Meteor 0.8.x レガシーの場合

データのない動的テンプレート: Boris Kotov の更新された Blaze (0.8.0) の回答は正しい軌道に乗っています (最新のドキュメントから取得) が、そのままでは機能しません。私は次のように動作しました：

{{> dynamicTemplate name=myDynName}}

<template name="dynamicTemplate">
    {{#with chooseTemplate name}}
        {{> template}}
   {{/with}}
</template>

Template.dynamicTemplate.chooseTemplate = function (name) {
    return { template: Template[name] };
};

もっと簡単な解決策があることを願っていますが、示されているようにテンプレートを JSON でラップする必要がありました。たぶん、これは他の誰かが前進するのに役立ちます。

データを含む動的テンプレート: データを動的にしたい場合は、必ず反応できるヘルパー メソッドを作成してください。効果を確認するには、必ずどこかで Session.set() を実行してください。

// Inside "myContainingTemplate"
{{> dynamicTemplateWithData name=myDynName data=myDataHelper}}

<template name="dynamicTemplateWithData">
    {{#with chooseTemplate name}}
        {{#with ../data}}
            {{> ..}}
        {{/with}}
    {{/with}}
</template>

Template.dynamicTemplateWithData.chooseTemplate = function (name) {
    return Template[name];
};

Template.myContainingTemplate.helpers({
    myDataHelper: function () {
        Session.get('myReactiveKey');
    }
});
于 2014-04-28T21:14:06.137 に答える
7

Meteor.render を見つけましたが、欠けているのはテンプレートの読み込みです。ドキュメントでは、 Template.foo() を呼び出してテンプレートの HTML を返すことができると述べています。

http://docs.meteor.com/#template_call

それをまとめると、テンプレート foo またはその他のブラケットアクセスを使用してアクセスできます。

var templateName = "foo";
var fragment = Meteor.render( function() {
    return Template[ templateName ](); // this calls the template and returns the HTML.
});

次に、fragment はリアクティブ フラグメントであるため、テンプレートは引き続きライブ アップデートを受け取ることができます。フラグメントを Web ページに配置する必要があります (私は jQuery を使用しているため、この例も同様です)。

$("#htmlnode").html( fragment );

$("#htmlnode") は、テンプレートをレンダリングする DOM 内の単なるノードです。これで Web ページにレンダリングされたコンテンツができました。

于 2012-10-20T07:41:32.583 に答える
2

ブレイズの更新：

https://github.com/meteor/meteor/wiki/Using-Blaze#templatefoo-is-not-a-function-and-does-not-return-a-string

特定のデータ コンテキストでテンプレートを動的にレンダリングする

年：

{{dynamicTemplate name="templateName" data=dataContext}}

Template.foo.dynamicTemplate = function (opts) {
  return Template[opts.name](opts.data);
};

新規: (特に、Blaze では、包含ヘルパーまたはブロック ヘルパーへのキーワード引数が、新しいデータ コンテキストになる単一のオブジェクトにバンドルされます)

{{> dynamicTemplate name="templateName" data=dataContext}}

<template name="dynamicTemplate">
  {{#with chooseTemplate name}}
    {{#with ../data}}  {{! original 'data' argument to DynamicTemplate}}
      {{> ..}}         {{! return value from chooseTemplate(name) }}
    {{/with}}
  {{/with}}
</template>

Template.dynamicTemplate.chooseTemplate = function (name) {
  return Template[name];
}

ところで、私は実際に遊んだことはありませんが、これは新しい blaze ドキュメントから取ったものです。だから私はそれがそれを行う方法であるべきだと思います;）

于 2013-09-10T20:28:07.240 に答える
2

私はちょうどこのようにやっています.jQueryは必要ありません:

編集済み

Template.mainContent.showContentFromRouter = function() {
    return Template[Meteor.Router.page()]();
};

この場合、Meteor Router を使用しており、(Router から) 選択したテンプレートを返しますが、次のようにすることもできます。

Template.mainContent.showDynamicContent = function() {
    return Template['someTemplateYouveDefined']();
};
于 2013-02-26T15:02:12.820 に答える
0

https://github.com/meteor/meteor/wiki/Using-Blazeから

{{> post}}

Template.foo.helpers({
  post: function () {
    return Template[this.postName];
  }
});

テンプレート インクルードは、テンプレート オブジェクトのヘルパーとデータの名前空間を検索するようになったため、使用するテンプレートをプログラムで簡単に選択できます。これは強力な機能であり、あるテンプレートを別のテンプレートのヘルパーとして割り当てるなどのパターンを許可して、オーバーライドできるようにします。

于 2014-08-13T06:00:00.010 に答える
-1

私にとって最も簡単な方法は、関数 get_dynamic_template を作成することでした。

var a= get_dynamic_template(template_name,data);

通常の変数 {{a}} としてレンダリングできるものを返します

この関数のコードは非常に単純です。

var get_dynamic_template = function(template_name,data)
{

      return function(){
        return new Handlebars.SafeString(
          UI.toHTML(
               Template[template_name].extend({data: function () { return data; }}))
          );
      };

}
于 2014-04-05T21:36:04.280 に答える