web-dev-qa-db-ja.com

Meteor.jsでテンプレートを動的にロードする

テンプレートを明示的に指定せずに動的にテンプレートをロードする機能が欲しいのですが。

例として：

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

ここで、「foo」はテンプレートですが、いくつかのメソッドを呼び出すことによって動的にロードする機能が必要です。

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

これは可能ですか？

javascriptmeteor
20
chimon2000

Meteor 0.9.x新しいAPI

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

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

Meteor 0.8.xレガシーの場合

動的テンプレートWithoutデータ：Boris Kotovの更新されたBlaze（0.8.0）の回答は正しい方向にあります（最新のドキュメントから取得）が、そうではありませんt現状のままで作業します。私は以下を機能させました：

{{> dynamicTemplate name=myDynName}}

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

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

より簡単な解決策があることを願っていますが、次のようにテンプレートをJSONでラップする必要がありました。多分これは誰かが前進するのを助けるでしょう。

動的テンプレートWithデータ：データを動的にしたい場合は、対応できるヘルパーメソッドを作成してください。効果を確認するには、必ずどこかで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');
    }
});
13
Turbo

Meteor 0.9.4-1.0のように、テンプレートを動的にレンダリングする方法は次のとおりです。この執筆時点では、他のすべての回答は廃止されていました。

一連のレコードを編集している、または新しいレコードを作成していて、いくつかのセッション変数に基づいてupdateテンプレートまたはnewテンプレートのいずれかをレンダリングしたいとします。

これを行うには2つの方法があります。

1）これはMeteor 0.9.4以降で公式に推奨されている方法です- Template.dynamic ：

<template name="records">
  {{> Template.dynamic template=whichOne}}
</template>

<template name="recordUpdate">
  ...
</template>

<template name="recordNew">
  ...
</template>

Template.records.helpers({
  whichOne: function () {
    return Session.get('edit') ? 'recordUpdate' : 'recordNew'
    // note that we return a string - per http://docs.meteor.com/#template_dynamic
  }
});

2）これはMeteorのさまざまなバージョンで機能しますが、テンプレートが動的に選択されるかどうかが明確でないため、公式には推奨されません。

<template name="records">
  {{> whichOne}}
</template>

{{! Note how "whichOne" is indistinguishable from a constant template name... }}
{{  ...like "recordUpdate" or "recordNew" below. }}

<template name="recordUpdate">
  ...
</template>

<template name="recordNew">
  ...
</template>

Template.records.helpers({
  whichOne: function () {
    return Session.get('edit') ? Template.recordUpdate : Template.recordNew
    // note that we return a Template object, not a string
  }
});

テンプレートにデータコンテキストを渡すには、次を使用します。

{{> Template.dynamic template=whichOne data=myData}}
36
Dan Dascalescu

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.
});

次に、フラグメントはReactiveフラグメントであるため、テンプレートは引き続きライブアップデートを受信できます。フラグメントをWebページに配置する必要があります（私はjQueryを使用しているため、この例でも使用しています）。

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

$（ "＃htmlnode"）は、テンプレートをレンダリングしたいDOM内のノードです。これで、レンダリングされたコンテンツがWebページにあります。

7
Joc

私はこのようにしています、jQueryは必要ありません：

[〜＃〜]編集済み[〜＃〜]

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

この場合、Meteorルーターを使用していて、（ルーターから）選択したテンプレートを返しますが、次のようにすることができます。

Template.mainContent.showDynamicContent = function() {
    return Template['someTemplateYouveDefined']();
};
2
Kristoffer K

ブレイズの更新：

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

ちなみに、実際にはいじっていませんが、これは新しいブレイズドキュメントから取ったものです。だから私はそれがそれを行う方法であるべきだと思います;）

2
Boris Kotov

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

{{> post}}

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

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

0
Bernát

Meteor 0.8.x Legacy

ガイドとして Joc's 回答を使用して、 http://docs.meteor.com/#template_call を使用して同様に達成しましたが、代わりにヘルパーを使用して、 docs：

テンプレートヘルパー、Meteor.renderの本体、またはリアクティブHTMLが生成されているその他の設定内で呼び出されると、結果のHTMLに注釈が付けられ、リアクティブDOM要素としてレンダリングされます。

私のclient.jsは次のようになります。

Template.myPageTemplate.helpers({
  dynamicTemplate: function() {
    // conditional logic can be added here to determine which template to render
    return Template.myDynamicTemplate();
  }
});

そして私のhtmlは次のようになります：

<template name="myPageTemplate">
  <h1>My Template</h1>
  {{{dynamicTemplate}}}
</template>

<template name="myDynamicTemplate">
  <h1>My Dynamic Template</h1>
</template>
0
hillmark