使用带有_.find的underscore.js模板的TypeError

时间:2013-09-02 08:48:48

标签: javascript templates underscore.js

我正在写一个这样的小模板:

var viewHelpers = {
  valExists: function (variable) {
    var exists = ((typeof variable == "string") && (variable != ""));
    console.log('variable exists: ', exists, ' value: ', variable);
    return exists;
  },
}

var tpl = '<h1>Hello <%- _.find(["a", "b"], _.valExists) %></h1>';
_.extend(data, viewHelpers);
console.log(_.template(tpl, {
  data: data,
}));

我希望模板返回'&lt; h1&gt; Hello a&lt; / h1&gt;'。

相反,Firefox显示此错误:

TypeError: t is undefined

怎么了?

1 个答案:

答案 0 :(得分:1)

我理解不正确。我现在找到了解决方案。

_对象中找不到该功能时,会出现上述问题。而viewHelpers根本不是要绑定到_对象。它们应该只是提供给模板的数据的一部分。

我的代码看起来像这样:

var tpl = '<h1>Hello <%- _.find(["a", "b"], valExists) %></h1>';

var datalist = {
    data: data,
    valExists: function (variable) {
        var exists = ((typeof variable == "string") && (variable != ""));
        console.log('variable exists: ', exists, ' value: ', variable);
        return exists;
    },
    printExists: function (variables) {
        return _.find(variables, valExists);
    }
}

console.log(_.template(tpl, datalist));

这些viewHelper实际上与datalist中的其他变量位于同一名称空间中。

为了让它看起来更好,我可以将viewHelper的定义与datalist分开:

var tpl = '<h1>Hello <%- _.find(["a", "b"], valExists) %></h1>';

var viewHelpers = {
    valExists: function (variable) {
        var exists = ((typeof variable == "string") && (variable != ""));
        console.log('variable exists: ', exists, ' value: ', variable);
        return exists;
    },
    printExists: function (variables) {
        return _.find(variables, valExists);
    }
}

var datalist = {
    data: data,
}

// add the viewHelpers definition to datalist
_.extend(datalist, viewHelpers);

//
console.log(_.template(tpl, datalist));

它们实际上是一样的。

当我的viewHelpers在提供给模板的数据中不存在时,会发生错误。