Dynamically loading templates in Meteor.js
I would like the ability to load templates dynamically without explicitly specifying the template.
As an example:
-
I'm just doing it like this, no jQuery required:
EDITED
Template.mainContent.showContentFromRouter = function() { return Template[Meteor.Router.page()](); };In this case I'm using the Meteor Router, and return whatever template that I choose to (from the Router), but you could just do this:
Template.mainContent.showDynamicContent = function() { return Template['someTemplateYouveDefined'](); };讨论(0) -
Meteor 0.9.x New API
Dan Dascalescu pointed out Meteor now has built-in dynamic templates! This is nice because you do not need to include the extra code as seen in previous versions.
{{> Template.dynamic template=template [data=data] }}For Meteor 0.8.x Legacy
Dynamic Template Without Data: Boris Kotov's updated Blaze (0.8.0) answer is on the right track (taken from the latest docs), but it doesn't work as-is for me. I got the following to work:
{{> dynamicTemplate name=myDynName}} <template name="dynamicTemplate"> {{#with chooseTemplate name}} {{> template}} {{/with}} </template> Template.dynamicTemplate.chooseTemplate = function (name) { return { template: Template[name] }; };I hope there is a simpler solution, but I needed to wrap the Template in a JSON as shown. Maybe this will help someone else to move forward.
Dynamic Template With Data: If you have and want data to be dynamic, be sure to make a helper method that can react. Be sure to do a Session.set() somewhere to see the effect.
// 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'); } });讨论(0) -
Update for blaze:
https://github.com/meteor/meteor/wiki/Using-Blaze#templatefoo-is-not-a-function-and-does-not-return-a-string
Dynamically render a template with a given data context
Old:
{{dynamicTemplate name="templateName" data=dataContext}} Template.foo.dynamicTemplate = function (opts) { return Template[opts.name](opts.data); };New: (Notably, in Blaze, keyword arguments to inclusion or block helpers are bundled into a single object which becomes the new data context)
{{> 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]; }By the way, I don't really played with it, but this is what I took from the new blaze docs. So I think it should be the way to do it ;)
讨论(0) -
Based on hillmark's answer, this is the easiest it could get:
Template.main.template = function() { if (some_condition) { return Template.A(); } else { return Template.B(); } };With the corresponding .html
<body> {{> main}} </body> <template name="main"> {{{template}}} </template> <template name="A"> <h1>Template A</h1> </template> <template name="B"> <h1>Template B</h1> </template>Edit Doesn't work in Meteor 0.8.0
讨论(0)
加载中...
- 热议问题