使用Underscore.js预编译模板的方法

Question

我希望使用预编译的underscore.js模板。我使用_.template().source并将结果保存到文件中。但是我不明白如何使用这些模板。预编译的模板是字符串，我无法将其转换为函数。我尝试使用eval，但它总是返回解析错误。

例如：

<div>
    <% for(var i = 0; i < 5; i++){ %>
        <div><%=i%></div>
    <% } %>
</div>

标准使用：

_.template(tpl).({});

结果：

<div>

    <div>0</div>

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

</div>

预编译：

_.template(tpl).source

预编译模板：

"function(obj){
var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
with(obj||{}){
__p+='<div>\n\t';
 for(var i = 0; i < 5; i++){ 
__p+='\n\t\t<div>'+
((__t=(i))==null?'':__t)+
'</div>\n\t';
 } 
__p+='\n</div>\n';
}
return __p;
}"

运行预编译模板：

var a = eval(tplc);
a({});

错误：

Error
line: 1
message: "Parse error"
sourceId: 139746789246216
__proto__: SyntaxError

- LMnet

Answer 1

是的，source属性返回编译后的模板字符串。您可以将该字符串写入文件，定义一个类似于JavaScript对象字面量的东西：

window.JST = { };
JST.some_name = function(obj){ ... };
// The rest of the compiled template functions go here

然后，像加载其他JavaScript文件一样将其加载到浏览器中，你最终会得到一堆编译好的模板函数在JST中：

var html = JST.some_name(data);

你可以按照自己的方式构建JST定义，这只是一个简单的方法来说明整体方法。

请记住，一个字符串是仅仅被处理为任何其他文本块（如写入文件）还是JavaScript源代码，这取决于谁正在解释该字符串。

- mu is too short

Answer 2

我终于找到了this解决方案。我不能说这是一种优雅的解决方案，但它有效。

var a = eval('[' + tplc + ']')[0];
a({});

- LMnet

---

eval永远不是答案。 - Kafoso

有些人在面对问题时会想：“我知道，我用 eval。”现在他们有两个问题，五个安全问题和一个无法调试的混乱。 - xDaizu