underscore.js - 下划线插值设置

Question

我正在尝试在主干中使用带下划线的 Handlebars 样式模板(与require.js一起使用)。
我有以下几点:

_.templateSettings.interpolate = /\{\{(.+?)\}\}/g;

在我的模板中，我设置了一个测试:

<div><%= title %> | {{ title }}</div>

我在浏览器中得到以下内容:

Correct title | {{ title }}

因此，看起来好像标准下划线模板设置正在起作用，而 Handlebars 样式的设置却被忽略了:

但是，如果我在Chrome浏览器中检入控制台，我会得到这个(在我看来，它应该是正确的)

_.templateSettings
Object {evaluate: /<%([\s\S]+?)%>/g, interpolate: /\{\{(.+?)\}\}/g, escape: /<%-([\s\S]+?)%>/g}

任何想法，为什么这不能正常工作？

Answer 1

当我这样做时:

_.templateSettings.interpolate = /\{\{(.+?)\}\}/g;
var t = _.template($('#t').html());

与您的模板在 #t中，我得到一个错误:

SyntaxError: Unexpected token '='

这很好地证实了我对评估正则表达式的怀疑:

/<%([\s\S]+?)%>/g

与模板中的 <%= ... %>匹配。等号与 \S匹配，因此，求值正则表达式当然会找到 <%= ... %>，剥离 <%和 %>，然后让 _.template尝试构建的JavaScript出现语法错误。

如果查看 _.template source内部，您会看到以特定顺序检查了正则表达式:

escape

interpolate

evaluate

因此，仅替换 interpolate会让 <%= ... %>掉入并被误解，但 evaluate会被捕获。

您需要做的就是也替换 evaluate正则表达式。我建议替换所有三个正则表达式以避免出现问题:

_.templateSettings = {
    evaluate:    /\{\{(.+?)\}\}/g,
    interpolate: /\{\{=(.+?)\}\}/g,
    escape:      /\{\{-(.+?)\}\}/g
};

演示: http://jsfiddle.net/ambiguous/SdLsn/