Develop Reference

Handelbars variables via Handlebars.registerPartial

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 }}

Handlebars dynamic inline partial

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.

Can I load partials from another file in Mustache.js?

I'm trying to load in partials from a separate file while using mustache.js but it's proven difficult. The PHP implementation makes this very easy, but not so much in the JS side.
I've gone through the docs and can't find anything related to this, only using an object as a partial instead of a file.
Here's some sort of psuedocode to explain what I'm trying to do.
$.Mustache.load('/mustaches.php', function () {
var item = { thing: 'one' };
var partial = 'partials/actions.mustache';
$('.container').mustache(
'main_mustache',
{item: item},
partial
);
});
So, I'd like to be able to load a secondary file as a partial an include it with the template to be used so I don't have to duplicate code across all the different templates I use.
With something like Blaze I can import a template with {{> templateName}} but it doesn't seem to be quite so easy with Mustache.js.
If this isn't possible with Mustache, what other libraries would you recommend?

You could load both templates with mustache, and then pass one of them (the partial) to the one that should render the partial. Be aware that in order to make it work, in the mustache where you want to render the partial, the variable name should be enclosed in triple curly bracers in order to tell mustache that it should be html:
<div>
<h1>This is my title</h1>
{{{partial}}}
</div>
and then:
$('.container').mustache(
'main_mustache',
{item: item, partial: partial},
);

How does Partials / Template inheritance work in Mustache?

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>

How do I deep compile nested handlebars content?

A project I'm working on uses Handlebars.js template system. It reads in content and when compiling the template injects the content where appropriate:
<div class="content">
<p>lorem ipsum</p>
{{{ content }}}
</div>
In this case the handlebars is compiled with a JS object who has a content property that is a string of text or HTML (hence the triple brackets).
However it is entirely possible that the content value (being text or HTML) could also include handlebars interpolation code:
var contentPassedToHandlebars = {
content: '<p>{{ foobar }}</p>',
foobar: 'foo'
};
Which currently outputs <p>{{ foobar }}</p> but what I would intend to get is <p>foo</p>.
Does handlebars have a facility for this nested content or is a custom helper required? ({{{custom_parse content}}})?
For context to this question
The situation derived from a build system (metalsmith) that reads in files as markdown, converted them to HTML, attach result to the content property of the file object, then parse a handlebars template which injects the file.content into it output. All this and I was hoping there was a solution to place handlebars or string interpolation into the markdown so the markdown files could have access to the same variables the templates have access to (obviously more global values in a config.json not the values associated with the file object being constructed).

There is no built in way to do this. You would have to manage you own pre-rendering process or internal helper.
For the solution I ended up running a pre-render before the official render. Although the code is not handlebars but instead part of the metalsmith-templates plugin, here is the solution I used.
This roughly translated to:
var contentPassedToHandlebars = {
content: '<p>{{ foobar }}</p>',
foobar: 'foo'
};
var x = Handlebars.compile(contentPassedToHandlebars.content)(contentPassedToHandlebars);
contentPassedToHandlebars.content = x;
Handlebars.compile(realTemplateSource)(contentPassedToHandlebars);

OR use this:
metalsmith-in-place
```
index.js
var inPlace = require('metalsmith-in-place')
....
.use(inPlace(true))
.....
Now, if you
write {{> footer }}
it will do the work.