我希望能够在不显式指定模板的情况下动态加载模板。
举个例子:
<template name="foo">
</template>
其中 'foo' 是模板,我希望能够通过调用某种方法动态加载它:
Meteor.render(Meteor.loadTemplate('foo'));
这可能吗?
我希望能够在不显式指定模板的情况下动态加载模板。
举个例子:
<template name="foo">
</template>
其中 'foo' 是模板,我希望能够通过调用某种方法动态加载它:
Meteor.render(Meteor.loadTemplate('foo'));
这可能吗?
从 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}}
Meteor 0.9.x 新 API
Dan Dascalescu 指出 Meteor 现在有内置的动态模板!这很好,因为您不需要包含在以前版本中看到的额外代码。
{{> Template.dynamic template=template [data=data] }}
对于 Meteor 0.8.x Legacy
没有数据的动态模板:鲍里斯·科托夫 (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 中,如图所示。也许这会帮助其他人继续前进。
带有数据的动态模板:如果您拥有并希望数据是动态的,请务必制作一个可以做出react的辅助方法。请务必在某处执行 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');
}
});
您已找到 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 就是你的 Reactive fragment,这样你的模板就可以继续接收实时更新。您的片段现在需要放置在网页中(我使用 jQuery,所以这个例子也是如此):
$("#htmlnode").html( fragment );
$("#htmlnode") 只是 DOM 中您希望呈现模板的节点。现在,您的网页中已呈现呈现的内容。
我就是这样做的,不需要jQuery:
已编辑
Template.mainContent.showContentFromRouter = function() {
return Template[Meteor.Router.page()]();
};
在这种情况下,我使用的是 Meteor 路由器,并返回我选择的任何模板(从路由器),但您可以这样做:
Template.mainContent.showDynamicContent = function() {
return Template['someTemplateYouveDefined']();
};
火焰更新:
使用给定的数据上下文动态呈现模板
老的:
{{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 文档中获取的内容。所以我认为这应该是这样做的方式;)