在Meteor.js中动态加载模板

Question

我希望能够动态加载模板而无需显式指定模板.

举个例子:

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

其中'foo'是模板,我希望能够通过调用一些方法动态加载它:

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

这可能吗？

Answer 1

以下是如何动态渲染模板,如Meteor 0.9.4 - 1.0.在撰写本文时,所有其他答案都已过时.

假设您正在编辑一堆记录或创建一个新记录,并希望根据某些Session变量呈现update模板或new模板.

有两种方法可以做到这一点:

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

Answer 2

Meteor 0.9.x新API

Dan Dascalescu指出Meteor现在有内置的动态模板!这很好,因为您不需要包含以前版本中看到的额外代码.

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

对于流星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');
    }
});

Answer 3

你找到了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片段,以便您的模板可以继续接收实时更新.你的片段现在需要放在网页中(我使用jQuery,所以这个例子也是如此):

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

$("#htmlnode")只是DOM中您希望呈现模板的节点.现在,您在网页中显示了已呈现的内容.