下划线插值设置

时间:2013-03-25 21:16:12

标签: underscore.js underscore.js-templating

我正在尝试在主干中使用带有下划线的把手样式模板(使用require.js)。 我有以下内容:

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

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

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

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

Correct title | {{ title }}

所以看起来标准的下划线模板设置正在运行,并且把手样式设置被忽略了:

但是,如果我在Chrome中检查控制台,我会得到这个(在我看来它应该是正确的)

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

为什么这不能正常工作?

1 个答案:

答案 0 :(得分:16)

当我这样做时:

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

将您的模板放在#t中,我收到错误消息:

  

SyntaxError:意外的标记'='

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

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

正在模板中匹配您的<%= ... %>。等号符合\S,因此评估正则表达式会找到<%= ... %>,剥离<%%>,并在JavaScript中留下语法错误{{} {1}}将尝试构建。

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

  1. _.template
  2. escape
  3. interpolate
  4. 因此,只需替换evaluate即可让interpolate内容陷入(并被误解),但<%= ... %>

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

    evaluate

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