Handlebars 例子提示 templateSpec.call is not a function

用 http://handlebarsjs.com 上的例子

var source=document.getElementById('entry-template').innerHTML;
var template = Handlebars.compile(source);

提示

TypeError: Handlebars.compile is not a function

然后用 Firebug 看了一个没有 complie 方法, 有个 template 然后用 template 调用

var template = Handlebars.template(source);

返回是一个函数 template(data) 这样调用提示 templateSpec.call is not a function

coswind 1楼•10个月前

不可能没有compile方法吧。至于template方法，貌似不是你这样用的。

coswind 2楼•10个月前

看下Handlebars.template的定义:

function template(templateSpec, env) {
    if (!env) {
      throw new Exception("No environment passed to template");
    }

    // Note: Using env.VM references rather than local var references throughout this section to allow
    // for external users to override these as psuedo-supported APIs.
    var invokePartialWrapper = function(partial, name, context, helpers, partials, data) {
      var result = env.VM.invokePartial.apply(this, arguments);
      if (result != null) { return result; }

      if (env.compile) {
        var options = { helpers: helpers, partials: partials, data: data };
        partials[name] = env.compile(partial, { data: data !== undefined }, env);
        return partials[name](context, options);
      } else {
        throw new Exception("The partial " + name + " could not be compiled when running in runtime-only mode");
      }
    };

    // Just add water
    var container = {
      escapeExpression: Utils.escapeExpression,
      invokePartial: invokePartialWrapper,
      programs: [],
      program: function(i, fn, data) {
        var programWrapper = this.programs[i];
        if(data) {
          programWrapper = program(i, fn, data);
        } else if (!programWrapper) {
          programWrapper = this.programs[i] = program(i, fn);
        }
        return programWrapper;
      },
      merge: function(param, common) {
        var ret = param || common;

        if (param && common && (param !== common)) {
          ret = {};
          Utils.extend(ret, common);
          Utils.extend(ret, param);
        }
        return ret;
      },
      programWithDepth: env.VM.programWithDepth,
      noop: env.VM.noop,
      compilerInfo: null
    };

    return function(context, options) {
      options = options || {};
      var namespace = options.partial ? options : env,
          helpers,
          partials;

      if (!options.partial) {
        helpers = options.helpers;
        partials = options.partials;
      }
      var result = templateSpec.call(
            container,
            namespace, context,
            helpers,
            partials,
            options.data);

      if (!options.partial) {
        env.VM.checkRevision(container.compilerInfo);
      }

      return result;
    };
  }

传入的参数是一个function，这也是为什么你调用Handlebars.template(source)之后会报 templateSpec.call is not a function 的错误。

yakczh 3楼•10个月前

按官网的例子写的

<script type="text/x-handlebars-template"  id='xx'>

    <h1>{{title}}</h1>
    <ul>
        {{#names}}
            <li>{{name}}</li>
        {{/names}}
    </ul>

</script>

<script type="text/javascript">
var source=document.getElementById('xx').innerHTML;
var template = Handlebars.compile(source);
console.log(template);
   var data = {"title": "Story", "names": [{"name": "Tarzan"}, {"name": "Jane"}]};
console.log(template(data));
</script>