How do I generate HTML output from a meteor template for a given contextual data object (version 0.8+)

Question

I am trying to integrate meteor with another JS framework. I had things working fairly well prior to the latest Blaze upgrade (i.e. pre-version 0.8). In order to get this to work, I need to render a meteor template as an HTML string. Moreover, I need to be able to supply a data object to provide the values for the variables included in the template.

Pre 0.8, I could simply do the following:

var myTemplateName = 'someTemplateName';
var myTemplateVariableData = {myTemplateVariableData: {'xxx': 'some data}};
var myTemplateHTML = Template[myTemplateName].render(myTemplateVariableData);

Of course, that no longer works. However, I have to think there is some way to do this still even post-0.8. I have gotten fairly close with the following:

var myTemplateVariableData = {'xxx': 'some data};
var templateName = 'someTemplateName';

var myTemplateHTML = "";
var dr = new UI.DomRange; // domain range

var loadedTemplate = Template[templateName].extend(
    {
        data: function () {
            return { myTemplateVariableData: myTemplateVariableData }
        }
    }
);

var renderedTemplate = loadedTemplate.render();

UI.materialize(renderedTemplate, dr, null, dr.component);

for (var member in dr.members) {
    if (dr.members.hasOwnProperty(member)) {
        var testHTML = dr.members[member].innerHTML;
        if (testHTML) {
            myTemplateHTML = myTemplateHTML + testHTML
        } else {
            myTemplateHTML = myTemplateHTML + dr.members[member].textContent
        }
    }
}

The problem with the result of this attempt is that if I try something like this:

{{#if myTemplateVariableData.xxx}}<span>&nbsp;{{myTemplateVariableData.xxx}}</span>{{/if}}

I will get the span showing up but no content other than the &nbsp. It seems as though when inside of an if block, it loses the context and can't see the myTemplateVariableData attribute on the 'this' object any longer.

I suspect there is an easier way to accomplish what I am trying to do here but I am out of ideas at present so I thought I'd post this here to see if anyone else had tried to do something similar.

Answer 1

To answer your question in the title, you could do it like this:

var templateName = 'myTemplate'
var context = {randomNumber: 527}
var div = document.createElement('div')

var component = UI.renderWithData(Template[templateName], context)
UI.insert(component, div)

var htmlString = div.innerHTML // <-- What you want.

But that's maybe not what you want?

Answer 2

My solution I think is a little more straight forward:

function html(contextObject, templateName) {
                return Blaze.toHTML(Blaze.With(contextObject, function() { return Template[templateName]; }));
            }

use:

template file

<template name="myTemplate">
<div id="{{myid}}"></div>
</template>

in some JS file

var myhtml = html({myid : 11}, "myTemplate") //<div id="1"></div>