Dynamically loading templates in Meteor.js
I would like the ability to load templates dynamically without explicitly specifying the template.
As an example:
-
From https://github.com/meteor/meteor/wiki/Using-Blaze
{{> post}} Template.foo.helpers({ post: function () { return Template[this.postName]; } });Template inclusions now search the namespace of helpers and data for template objects, so it's easy to programmatically choose which template to use. This is a powerful feature, and will allow patterns like assigning one template as a helper of another so that it can be overridden.
讨论(0) -
This would handl dynamic templates both with and without data: (requires Blaze/ Meteor 0.8)
{{> dynamicTemplate name=templateName}} <template name="dynamicTemplate"> {{#with chooseTemplate name }} {{#if ../data}} {{#with ../data }} {{> .. }} {{/with}} {{else}} {{> this}} {{/if}} {{/with}} <template name="dynamicTemplate">template javascript:
Template.dynamicTemplate.chooseTemplate = function (name) { return Template[name]; };讨论(0) -
for me the easiest way was to just create a function get_dynamic_template, so something like:
var a= get_dynamic_template(template_name,data);which returns what can be rendered as a normal variable {{a}}
The code for this function is quite simple:
var get_dynamic_template = function(template_name,data) { return function(){ return new Handlebars.SafeString( UI.toHTML( Template[template_name].extend({data: function () { return data; }})) ); }; }讨论(0) -
Here's how to dynamically render templates, as of Meteor 0.9.4 - 1.0. All other answers were obsolete at the time of this writing.
Let's say you're editing a bunch of records, or creating a new one, and want to render either the
updatetemplate, or thenewtemplate, based on some Session variables.There are two ways to do this:
1) This is the officially recommended method for Meteor 0.9.4 or newer - it uses 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) This works in various Meteor versions, but isn't recommended officially because it's unclear that the template is chosen dynamically:
<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 } });To pass a data context to the template, use:
{{> Template.dynamic template=whichOne data=myData}}讨论(0) -
Meteor 0.8.x Legacy
Using Joc's answer as a guide, I've achieved similar using http://docs.meteor.com/#template_call, but using a helper instead, as suggested by the docs:
When called inside a template helper, the body of Meteor.render, or other settings where reactive HTML is being generated, the resulting HTML is annotated so that it renders as reactive DOM elements
My client.js looks a bit like this:
Template.myPageTemplate.helpers({ dynamicTemplate: function() { // conditional logic can be added here to determine which template to render return Template.myDynamicTemplate(); } });and my html looks like this:
<template name="myPageTemplate"> <h1>My Template</h1> {{{dynamicTemplate}}} </template> <template name="myDynamicTemplate"> <h1>My Dynamic Template</h1> </template>讨论(0) -
You have found Meteor.render but what you are missing is the template loading. In the docs it mentions that you can call Template.foo() to return the HTML for a template.
http://docs.meteor.com/#template_call
Putting that together you access the template foo or any other using bracket access so:
var templateName = "foo"; var fragment = Meteor.render( function() { return Template[ templateName ](); // this calls the template and returns the HTML. });Then fragment is your Reactive fragment, so that your template can continue to receive live updates. Your fragment now needs placing in the web page (I use jQuery, so this example does as well):
$("#htmlnode").html( fragment );$("#htmlnode") is just a node in your DOM where you want the template rendered. And you now have the rendered content in your web page.
讨论(0)
加载中...
- 热议问题