快速计算把手模板的价值？

Question

Is there a way to provide a function to Handlebars that calculates the value when needed, instead of supplying all values up-front in the context?

For example, say I wanted to fill out any template with example data:

var exampleFunction = function (varName) {
    return "Example " + varName;
};

If I know ahead of time what variables a Handlebars template needs, I could use this function to assemble a context. However, what I really want to do is:

var template = Handlebars.compile(templateString);
var html = template.fillFromFunction(exampleFunction);

Is this possible? If not, then are there any other template engines that support it?

---

Bonus question: can this be made asynchronous, eg:

var template = Handlebars.compile('{{foo.bar}}');
var dataFunction = function (path, callback) {
    setTimeout(function () {
        callback("Async " + path);
    }, 100);
};

Answer 1

Short version:

It's a hack, but I've got a workaround.

var oldNameLookup = handlebars.JavaScriptCompiler.prototype.nameLookup;
handlebars.JavaScriptCompiler.prototype.nameLookup = function (parent, name) {
    return '(typeof ' + parent + ' === "function" ? '
        + parent + '(' + JSON.stringify(name) + ') : '
        + oldNameLookup(parent, name) + ')';
}

Usage:

var template = handlebars.compile('{{foo}} {{bar}}');
var dataFunction = function (key) {
    return 'data:' + key;
};
console.log(template(dataFunction));
// Outputs: "data:foo data:bar"

Sub-properties:

To enable sub-properties (eg "{{foo.bar}}" ), we need a wrapper method:

function transformFunc(dataFunction) {
    return function (key) {
        if (typeof key !== 'string') {
            return dataFunction('');
        }
        var pointerKey = '/' + key.replace(/~/g, '~0').replace(/\//g, '~1');
        return transformFunc(function (path) {
            return dataFunction(pointerKey + path);
        });
    };
}

Usage:

var template = handlebars.compile('{{foo}} {{foo.bar}}');
var dataFunction = transformFunc(function (path) {
    // path is a JSON Pointer path
    return "data:" + path;
});
console.log(template(dataFunction));
// Outputs: "data:/foo data:/foo/bar"

If one wanted, I suppose .compile() and .precompile() could be modified so that transformFunc() was applied to any incoming function when templating.

Explanation:

The hack includes altering the code-generation of Handlebars, but this code comment implies this is sort of OK. I tried finding a way to subclass, but couldn't see how to get this or this to use it.

Short version: override the nameLookup() method .

This method usually generates JavaScript code like depth0.foo or (depth1 && depth1.bar) . We're extending it so the generated code first checks the parent to see if it's a function.

If it's a function, then it calls the function with the property name as the argument. Otherwise, it returns the same value as previously. For example, it will generate something like:

(typeof depth0 === "function" ? depth0("foo") : (depth0 && depth0.foo))

For simple variables (eg just "{{foo}}" ) you can now just supply a function and it will be called with the variable names.

Enabling sub-properties

However, for nested properties (ie "{{foo.bar.baz}}" ) we actually need our function to return another function, which can either return appropriate data or be called with another property name, depending which is needed.

So: if our transformed function is not given a string, then it is assumed we are at the end-point (we want the actual data, not a sub-property), so we just call through.

If our transformed function is given a string, then it's assumed to be a key, so another (transformed) function is return that calls back to the data function, prefixing the argument appropriately.