Uncaught TypeError: Object function (Handlebars ... } has no method 'call'

[tommedema]

I'm trying to share a template on the client side but am running into an exception thrown on the client side.

In my Express route I do the following to share the template:

var
  srcd        = process.cwd() + "/src",
  exphbs      = require("express3-handlebars"),
  config      = require(srcd + "/config"),
  hbs         = exphbs.create({partialsDir: config.http.web.partialsDir});

module.exports = function handleManageMenu(req, res) {

  //expose template partials
  hbs.loadTemplates(config.http.web.partialsDir, {
    cache: (config.environment === "production") ? true : false,
    precompiled: true
  }, function(err, templates) {
    if (err) return console.error(err.stack);

    //expose templates
    res.locals.exposedData.templates = templates;

    //render
    res.render("manage/menu");

  });

};

This works just fine. The templates are exposed to the client using JSON.

I then revive the templates on the client side as done in your advanced example:

var Handlebars  = require("../../vendor/handlebars"),
    exposedData = require("../../exposedData"),
    revive      = Handlebars.template,
    templates   = exposedData.get("templates"),
    menu        = exposedData.get("menu");

exports.run = function() {

  Handlebars.templates = Handlebars.templates || {};
  for (var key in templates) {
    if (templates.hasOwnProperty(key)) {
      Handlebars.templates[key] = Handlebars.template(templates[key]);
    }
  }

  console.log(Handlebars.templates["menu/menu.handlebars"]);

};

This seems fine, the console.log returns a function in the form function (context, options) { ...}.

However.. when I then call this function with the menu as the context (menu is an array), things go horribly wrong:

console.log(Handlebars.templates["menu/menu.handlebars"](menu));

results in:

Uncaught TypeError: Object function (Handlebars,depth0,helpers,partials,data) {
  this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Handlebars.helpers); partials = this.merge(partials, Handlebars.partials); data = data || {};
  var buffer = "", stack1, self=this;

function program1(depth0,data) {

  var buffer = "", stack1;
  buffer += "\n\n  ";
  stack1 = helpers['if'].call(depth0, depth0.items, {hash:{},inverse:self.program(4, program4, data),fn:self.program(2, program2, data),data:data});
  if(stack1 || stack1 === 0) { buffer += stack1; }
  buffer += "\n\n";
  return buffer;
  }
function program2(depth0,data) {

  var buffer = "", stack1;
  buffer += "\n\n    ";
  stack1 = self.invokePartial(partials['menu/category'], 'menu/category', depth0, helpers, partials, data);
  if(stack1 || stack1 === 0) { buffer += stack1; }
  buffer += "\n\n  ";
  return buffer;
  }

function program4(depth0,data) {

  var buffer = "", stack1;
  buffer += "\n\n    ";
  stack1 = self.invokePartial(partials['menu/item'], 'menu/item', depth0, helpers, partials, data);
  if(stack1 || stack1 === 0) { buffer += stack1; }
  buffer += "\n\n  ";
  return buffer;
  }

  buffer += "<div class=\"menu\">\n";
  stack1 = helpers.each.call(depth0, depth0, {hash:{},inverse:self.noop,fn:self.program(1, program1, data),data:data});
  if(stack1 || stack1 === 0) { buffer += stack1; }
  buffer += "\n</div>";
  return buffer;
  } has no method 'call' 

Note that the exact same template works fine on the server side, with the exact same menu object (array).

The menu/menu.handlebars template is defined as:

<div class="menu">
{{#each this}}

  {{#if this.items}}

    {{> menu/category this}}

  {{else}}

    {{> menu/item this}}

  {{/if}}

{{/each}}
</div>

Any idea what's going wrong?

[ericf]

Without stepping through your code it would be hard for me to debug this. I guess make sure all you're partials are actually being revived client-side and you probably need to register them via Handlebars.registerPartial().

[tommedema]

@ericf unfortunately after reviving all templates and partials and running Handlebars.registerParial I still get the same error:

var Handlebars  = require("../../vendor/handlebars"),
    exposedData = require("../../exposedData"),
    revive      = Handlebars.template,
    templates   = exposedData.get("templates"),
    menu        = exposedData.get("menu");

exports.run = function() {

  //revive all templates and partials
  Handlebars.templates = Handlebars.templates || {};
  for (var key in templates) {
    if (templates.hasOwnProperty(key)) {
      Handlebars.templates[key] = Handlebars.template(templates[key]);
    }
  }

  //register partials
  Handlebars.registerPartial("menu/item", Handlebars.templates["menu/item.handlebars"]);
  Handlebars.registerPartial("menu/category", Handlebars.templates["menu/category.handlebars"]);

  //run template
  var
    template  = Handlebars.templates["menu/menu.handlebars"],
    html      = template(menu);

  //debug
  console.log(html);

};

results in:

Uncaught TypeError: Object function (Handlebars,depth0,helpers,partials,data) {
  this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Handlebars.helpers); partials = this.merge(partials, Handlebars.partials); data = data || {};
  var buffer = "", stack1, self=this;

function program1(depth0,data) {

  var buffer = "", stack1;
  buffer += "\n\n  ";
  stack1 = helpers['if'].call(depth0, depth0.items, {hash:{},inverse:self.program(4, program4, data),fn:self.program(2, program2, data),data:data});
  if(stack1 || stack1 === 0) { buffer += stack1; }
  buffer += "\n\n";
  return buffer;
  }
function program2(depth0,data) {

  var buffer = "", stack1;
  buffer += "\n\n    ";
  stack1 = self.invokePartial(partials['menu/category'], 'menu/category', depth0, helpers, partials, data);
  if(stack1 || stack1 === 0) { buffer += stack1; }
  buffer += "\n\n  ";
  return buffer;
  }

function program4(depth0,data) {

  var buffer = "", stack1;
  buffer += "\n\n    ";
  stack1 = self.invokePartial(partials['menu/item'], 'menu/item', depth0, helpers, partials, data);
  if(stack1 || stack1 === 0) { buffer += stack1; }
  buffer += "\n\n  ";
  return buffer;
  }

  buffer += "<div class=\"menu\">\n";
  stack1 = helpers.each.call(depth0, depth0, {hash:{},inverse:self.noop,fn:self.program(1, program1, data),data:data});
  if(stack1 || stack1 === 0) { buffer += stack1; }
  buffer += "\n</div>";
  return buffer;
  } has no method 'call'

Any other suggestions? I'm using the latest handlebars.runtime.js from the official website.

[tommedema]

@ericf I've located the issue: the templates returned by hbs.loadTemplates are actually of type String! This is only appropriate in your specific usecase where you expose the templates to the client using {{{template}}} in your handlebars view.

In my case I am actually exposing real objects to the client, and therefore I need it to be an actual function on the server side (not a string). I'm not sure how to accomplish this though.. maybe I have to use eval?

[tommedema]

The following serves as a workaround, but is very ugly and should not be necessary.

(run on the client side)

//revive all templates and partials
Handlebars.templates = Handlebars.templates || {};
for (var key in templates) {
  if (templates.hasOwnProperty(key)) {
    eval("var templFn = " + templates[key] + ";"); //casts string-denoted function back to function
    Handlebars.templates[key] = Handlebars.template(templFn);
  }
}

Here the string template function is evaled to an actual function.

Why is the function returned as a string anyway?

[ericf]

@ericf I've located the issue: the templates returned by hbs.loadTemplates are actually of type String! This is only appropriate in your specific usecase where you expose the templates to the client using {{{template}}} in your handlebars view.

This is because you want to precompile templates before sending them to the client so you don't need the Handlebars compiler on the client, just the Handlebars runtime.

In my case I am actually exposing real objects to the client, and therefore I need it to be an actual function on the server side (not a string). I'm not sure how to accomplish this though.. maybe I have to use eval?

If you are trying to expose JavaScript to the client, you should look at express-state, a package I wrote to do just that.

But you could also follow the advanced example here where templates are used server-side for rendering and they are precompiled to shipping to the client. Then on the client they are revived and usable with only requiring the Handlebars runtime.

[ericf]

I think you should separate your concerns here from rendering content on the server vs. bundling up precompiled templates to ship to the client. Both use cases are handled with express3-handlebars and can use the same template files in your source code.

[tommedema]

I'm having trouble following you, maybe we are talking about different things. I am already using the same template files in my source code, both on the server and client side (they are in one folder). I'm already capable of exposing real javascript objects to the client: this is not the problem. I am only using the Handlebars runtime.

Why would the template function have to be encapsulated in a string for the templates to be precompiled? That doesn't make sense to me. The template can be sent to the client as a function using JSON. This is what I'm doing, but because the returned template function is actually a String I have to eval it on the client side to cast it back to an actual function.

In short: the only problem is that loadTemplates is returning the templates as strings instead of functions.

[ericf]

Why would the template function have to be encapsulated in a string for the templates to be precompiled?

Handlebars precompiler returns a string. Precompiled templates are not meant to be used a literal strings, but instead become part of a request body or a file's contents. So that makes precompiled templates not usable on the server for rendering.

The template can be sent to the client as a function using JSON.

JSON does not support serializing functions. If you wanted to serialize functions and send them to the client, I would recommend using express-state which supports that sort of thing (this is why I mentioned it before.)

In short: the only problem is that loadTemplates is returning the templates as strings instead of functions.

If you call loadTemplates() with the precompile option set to true it will return strings, because the Handlebars precompiler returns strings. If you want to use functions that can be used server-side to render, then don't specify that option: See loadTemplates() parameters.

[tommedema]

@ericf but I'm rendering the precompiled templates on the client side, not the server side. :)

[ericf]

Like I've said before, without having the actual app to run this not going to work for debugging. I guess start with the advanced example app here, which works, and hopefully you can figure out where you're app is different.

[tommedema]

Well, I've worked around it using eval on the client side, so I guess we can close the issue.

I guess this means that if you don't want to use eval, you are forced to share the templates in a server side view/template using something like:

<script>
    window.templates = {};
    {{#each templates}}
        window.templates["{{{this.key}}}"] = {{{this.template}}};
    {{/each}}
</script>

Instead of using an existing solution to share server side variables with the client side.