Handlebars Error "templateSpec.call" is not a function #757

Closed
marc-parillo opened this Issue Mar 5, 2014 · 3 comments

2 participants

@marc-parillo

I conducted a simple test of handlebars by pre-compiling a template using v1.3.0. However, I keep getting the same error: "TypeError: templateSpec.call is not a function" whenever I try to use the pre-compiled template.

Original template:

<div class="entry">
    <h1>{{title}}</h1>
    {{#with story}}
        <div class="intro">{{{intro}}}</div>
        <div class="body">{{{body}}}</div>
    {{/with}}
</div>

Compiled template (mytemplate.js)

(function() {  var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {}; templates['mytemplate'] = template({"1":function(depth0,helpers,partials,data) {
  var stack1, helper, functionType="function", buffer = "\r\n        <div class=\"intro\">";
  stack1 = ((helper = helpers.intro || (depth0 && depth0.intro)),(typeof helper === functionType ? helper.call(depth0, {"name":"intro","hash":{},"data":data}) : helper));
  if(stack1 || stack1 === 0) { buffer += stack1; }
  buffer += "</div>\r\n        <div class=\"body\">";
  stack1 = ((helper = helpers.body || (depth0 && depth0.body)),(typeof helper === functionType ? helper.call(depth0, {"name":"body","hash":{},"data":data}) : helper));
  if(stack1 || stack1 === 0) { buffer += stack1; }
  return buffer + "</div>\r\n    ";
},"compiler":[5,">= 2.0.0"],"main":function(depth0,helpers,partials,data) {
  var stack1, helper, functionType="function", escapeExpression=this.escapeExpression, buffer = "<div class=\"entry\">\r\n    <h1>"
    + escapeExpression(((helper = helpers.title || (depth0 && depth0.title)),(typeof helper === functionType ? helper.call(depth0, {"name":"title","hash":{},"data":data}) : helper)))
    + "</h1>\r\n    ";
  stack1 = helpers['with'].call(depth0, (depth0 && depth0.story), {"name":"with","hash":{},"fn":this.program(1, data),"inverse":this.noop,"data":data});
  if(stack1 || stack1 === 0) { buffer += stack1; }
  return buffer + "\r\n</div>";
},"useData":true});
})();

Usage:

<html>
<head>
<script type="text/javascript" src="/js/Vendor/jquery/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="/js/Vendor/handlebars/handlebars-v1.3.0.js"></script>
    <script type="text/javascript" src="mytemplate.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

               /* does not work */
               console.info(Handlebars.templates);
               var template = Handlebars.templates['mytemplate'];
              var context = {
                title: "First Post",
                story: {
                    intro: "Before the jump",
                    body: "After the jump"
                 }
              };
               var html = template(context);
              $('body').append(html);


  });
    </script>
</head>
<body>
</body>
</html>

The screenshot shows Handlebars.templates exists and it returns a function.
screenshot

@kpdecker
Collaborator

What version of the precompiler are you using and what version of the runtime?

@kpdecker
Collaborator

Actually it looks like you are compiling with 2.x precompiler. Please make sure that you are running either 1.3 on both sides or 2.x on both sides otherwise you will see failures. There are rudimentary checks for version mismatch but we had to break them in 2.x in order to fix them :/

@kpdecker kpdecker closed this Mar 5, 2014
@marc-parillo

Thank you. It looks like I'm using version 2.0.0 compiler. So, I need to download the handlebars.js runtime script v2.0.0 from github instead of from the Handlebars website, which provides version 1.3.0.

For 2.0.0 Alpha:

Make sure installation of handlebars compiler s correct

npm uninstall handlebars -g
npm install handlebars@2.0.0-alpha.2 -g

Use correct runtime script

Go To: https://github.com/components/handlebars.js
Download: "handlebars.runtime.min.js"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment