So let's say I'm storing <div>{{name}}</div>
and <div>{{age}}</div>
in my database.
Then I want to take the first HTML string and render it in a template - {{> template1}}
which just renders the first string with the {{name}}
handlebar in it. Then I want to give that newly generated template/html data, so that it can fill in the handlebar with the actual name
from the database, so that we would get <div>John</div>
. I've tried doing
<template name="firstTemplate">
{{#with dataGetter}}
{{> template1}}
{{/with}}
</template>
Where template1 is defined as
<template name="template1">
{{{templateInfo}}}
</template>
And templateInfo is the helper that returns the aforementioned html string with the handlebar in it from the database.
dataGetter is just this (just an example, I'm working with differently named collections)
Template.firstTemplate.dataGetter = function() {
return Users.findOne({_id: Session.get("userID")});
}
I can't get the {{name}} to populate. I've tried it a couple of different ways, but it seems like Meteor doesn't understand that the handlebars in the string need to be evaluated with the data. I'm on 0.7.0 so no Blaze, I can't upgrade at the moment due to the other packages I'm using, they just don't have 0.8+ version support as of yet. Any ideas on how I can get this to work are much appreciated.
A very simple way is to include in the onRendered event a call to the global Blaze object.
If you need to dynamically compile complex templates, I would suggest Kelly's answer.
Otherwise, you have two options:
Create every template variation, then dynamically choose the right template:
eg, create your templates
And then include them dynamically with
Where
templateName
is a helper that returns"age"
or"name"
If your templates are simple, just perform the substitution yourself. You can use
Spacebars.SafeString
to return HTML.Luckily, the solution to this entire problem and any other problems like it has been provided to the Meteor API in the form of the Blaze package, which is the core Meteor package that makes reactive templates possible. If you take a look at the linked documentation, the Blaze package provides a long list of functions that allow for a wide range of solutions for programmatically creating, rendering, and removing both reactive and non-reactive content.
In order to solve the above described problem, you would need to do the following things:
First, anticipate the different HTML chunks that would need to be dynamically rendered for the application. In this case, these chunks would be
<div>{{name}}</div>
and<div>{{age}}</div>
, but they could really be anything that is valid HTML (although it is not yet part of the public API, in the future developers will have more options for defining this content in a more dynamic way, as mentioned here in the documentation). You would put these into small template definitions like so:and
Second, the definition for the
firstTemplate
template would need to be altered to contain an HTML node that can be referenced programmatically, like so:You would then need to have logic defined for your
firstTemplate
template that takes advantage of some of the functions provided by the Blaze package, namely Blaze.With, Blaze.render, and Blaze.remove (although you could alter the following logic and take advantage of the Blaze.renderWithData function instead; it is all based on your personal preference for how you want to define your logic - I only provide one possible solution below for the sake of explanation).So what we are doing here in the
onRendered
function for yourfirstTemplate
template is dynamically determining which of the pieces of data that we want to render onto the page (either name or age in your case) and using theBlaze.With()
function to create an unrendered view of that template using the data context of thefirstTemplate
template. Then, we select thefirstTemplate
template element node that we want the dynamically generated content to be contained in and pass both objects into theMeteor.render()
function, which renders the unrendered view onto the page with the specified element node as the parent node of the rendered content.If you read the details for the
Blaze.render()
function, you will see that this rendered content will remain reactive until the rendered view is removed using theBlaze.remove()
function, or the specified parent node is removed from the DOM. In my example above, I am taking the reference to the rendered view that I received from the call toBlaze.render()
and saving it directly on the template object. I do this so that when the template itself is destroyed, I can manually remove the rendered view in theonDestroyed()
callback function and be assured that it is truly destroyed.In 1.0 none of the methods described above work. I got this to work with the function below defined in the client code. The key was to pass the options { isTemplate: true} to the compile function.
The you can call with something like this on the client:
compileTemplate('faceplate', '<span>Hello!!!!!!{{_id}}</span>');
This will render with a UI dynamic in your html
{{> Template.dynamic template='faceplate'}}
Following @user3354036's answer :
1) Add this in your HTML
2) Call the compileTemplate method.
Save the template name in a Session variable. The importance of this is explained in the next point.
3) Write a helper function to return the template name. I have used Session variable to do so. This is important if you are adding the dynamic content on a click event or if the parent template has already been rendered. Otherwise you will never see the dynamic template getting rendered.
4) Write this is the rendered method of the parent template. This is to reset the Session variable.
This worked for me. Hope it helps someone.
You can actually compile strings to templates yourself using the spacebars compiler.. You just have to use
meteor add spacebars-compiler
to add it to your project.In projects using 0.8.x
In projects using 0.9.x