javascript scope

[smcmurray]

I'm trying to load subtemplates dynamically. So I created a small function that retrieves a template file and compiles it. Then I use that function inside templates. So I have code that looks like this:

  var cache = {};
  var compile = function(path){
      if (!(path in cache))
        cache[path] = doT.template($.ajax(path, {async: false}).responseText);
      return cache[path];
  };

  var people = [
    {
      "name": "Alice",
      "gender": "female"
    },
    {
      "name": "Bob",
      "gender": "male"
    }
  ];

  $.get("/templates/list.dot", function(r){
    var t = doT.template(r);
    t(people);
  });

list.dot could look like this:

{{~it :person}}
  {{=compile("/templates/"+ person.gender + ".dot")(person)}}
{{~}}

The list.dot template compiles, but the resulting function fails to run, complaining that "compile is not defined."

How do I get compile() into scope?

[smcmurray]

The best I could come up with was to change templateSettings.varname to 'it, compile', then pass in the compile function.

I'd love to be enlightened with a better way.

[epoberezkin]

Two other approaches are either adding them to data properties or passing context into templating function and pass it through to sub-templates (using .call/.apply).

Probably worth adding to doT 101 together with recursion #205.