Is it possible to pass a partial as a variable to another partial?
Something like:
{{>
template1
image="images/image1.jpg"
content=template2
}}
If I correctly understand what you are asking, then I think your question is answered in the Handlebars documentation on Dynamic Partials:
If a simple variable has the partial name, it's possible to resolve it via the lookup helper.
Your template would have to call template1 and pass they dynamic partial name as a string:
{{> template1 content="template2"}}
Your template1 partial would have to include the following:
{{> (lookup . "content")}}
Try to pass it as a string
{{> template1 tempPartial="template2"}}
And then reference it with
{{> (tempPartial) }}
Related
I have a Handelbars app that loads data from javascript and partials for the templates. To get the templates to work I use the following in the Javascript:
var data = require('partials/data.js');
Handlebars.registerPartial('data', data);
Then in my partial I am able to do:
{{> data }}
I have a Handelbars variable I can use in my main template but I want to pass it down to the partial. With my other partials that don't register via the Javascript this is possible. I am assuming I need to pass this variable down like I do the templates?
As per the handlebars documentation, you should be able to simply pass the variable down as a parameter, like so:
{{> data parameter=variable }}
I have a few lines of markup that I'd like to avoid keeping in an external partial file, but it should be rendered based on a variable value, either IN_PROCESS or DONE. I can make inline partials and render them based on static names:
{{#* inline "IN_PROCESS"}}IN_PROCESS{{/inline}}
{{#* inline "DONE"}}DONE{{/inline}}
{{> IN_PROCESS }}
{{> DONE }}
However I cannot figure out how to combine that with the () dynamic values syntax I have read about here.
So something like,
{{> (data.status) }}
└─────────┘ data.status would be either 'IN_PROCESS' or 'DONE'
Is this possible?
I believe you want something similar to this:
{{#* inline "IN_PROCESS"}}IN_PROCESS{{/inline}}
{{#* inline "DONE"}}DONE{{/inline}}
{{> (lookup . 'status')}}
{{> (lookup . 'status')}} will look through the JSON data object for its status attribute.
That is if you're passing your data in something like this:
var template = Handlebars.compile(**your source**);
$('body').append(template(data));
JSFiddle Example
The dot represents the data object that has been passed into the template function. The template function has no way of knowing what the object's name was:
template(inputData){
// This function wouldn't know that inputData.status was originally data.status
}
var data = {status: "DONE"};
template(data);
The dot is therefore used to tell "template" when searching for a parent that inputData should be the parent and we're looking for "status" as a child. I believe that is the use of it. I actually can't find any documentation regarding its use but all lookup's seem to be in the format lookup parent child so I assume that's the reasoning.
Folder structure,
..
/templates
|--/pages
|--/myPage.hbs
|../partials
|..myPartial.hbs
AFAIK, grunt & node are taking care of compiling and registering all the partials.
myPartial.hbs
<div>
{{#page.myObj}}
<span> {{a}} </span>
</div>
myPage.hbs,
I'm trying to do something like this,
---
myObj = {'a' : 1}
myObj2 = {'a' : 2}
---
{{> myPartial}}
How can I make my partial dynamic and take a parameter to show content depending on the object I pass it?
PS: I'm new to handlebars and taking over someone else's code, this is dummy code to show the problem I'm facing.
Handlebars partials take a second parameter which becomes the context for the partial:
{{> myPartial myObj}}
{{> myPartial myObj2}}
I don't really understand partials / template inheritance from Mustache / Hogan.js. As defined here and here you seem to must have two different files to make that work. I use it as follows in my (client side) page:
<template id="server-template">
{{#servers}}
<b>some html and {{> some other which I dont understand how to use}}</b>
{{/servers}}
</template>
<template id="room-template">
I want this in up there. (in the "partials" tag)
</template>
Thanks for helping. I compile them with this:
var source = $('#room-template').html(),
compiled = Hogan.compile(source)
$('#main').html(compiled.render(data))
Is that even possible?
The docs state that you must compile your partials separately, and then pass them to the render function:
In mustache.js an object of partials may be passed as the third
argument to Mustache.render. The object should be keyed by the name of
the partial, and its value should be the partial text.
var roomTemplateSource = $('#room-template').html();
var roomTemplate = Mustache.compile(roomTemplateSource);
Mustache.render(template, view, {
room: roomTemplate
});
<template id="server-template">
{{#servers}}
<b>some html and {{> room}}</b>
{{/servers}}
</template>
I wish to pass the parent templates context to a handlebars partial.
I register my partial in app.js with the following
Handlebars.registerPartial("lifestyles", Handlebars.templates['partials/product-lifestyles']());
I then render my partial inside my main template file like the following, passing in this as a second parameters of which I understand it should pass in the context of the parent
{>lifestyles this}}
I have a log helper which console logs a parameter, inside my partial I log out this, it returns undefined.
{{log this}}
Evidentially my context isn't being passed into my partial.
My understanding is that Handlebars supports this functionality, so what could be the reason it is not functioning?
STHayden is right, You need two opening braces when you call a partial
{{>lifestyles this}}
This is an example of using partial templates
http://jsfiddle.net/UMBGC/16/