小胡子格式的主干/下划线模板导致#磅/哈希符号出现错误？

Question

我正在使用骨干的下划线模板引擎和胡子格式化模式。

我已经在项目的其他地方成功地使用了它，但现在我第一次使用 Mustache 中的循环列表模式来填充模板，该模板引发了一个我有点困惑的错误。 chrome 中的错误是：

"Uncaught SyntaxError: Unexpected token ILLEGAL"

并指向回溯中下划线的模板函数，这几乎没有用，但在 firebug 中我得到了一个更有用的错误，如下所示：

建议哈希符号“#”是问题所在，这是有道理的，因为我知道 Mustache 工作正常，因为项目的许多其他部分都很好地使用了它，这也是这我第一次在模板中使用哈希符号。看起来循环功能或下划线的插值/模板设置有问题。

这是我的模板的相关部分：

<div class="thumblist thumblistleft" id="currentprojectslist">
    <div class="thumb-list-header">
         <h2>current projects</h2>
    </div>
    <div class="thumb-list-area">
        <ol>
        {{#worklist}}       <!----- LOOK HERE --->
            {{#current}}
              <li><a>{{title}}</a></li>
            {{/current}}
        {{/worklist}}
        </ol>
    </div>
</div>

这是一个 JSON 示例（全部验证正常），

{blah blah blah lot in here before,"worklist":[{"thumb":"img/project-s.jpg","id":"340","title":"Test Project One","desc":"big load of content here","current":true}], and so on....}

我最初在这里遵循此示例以供参考： http://mustache.github.com/#demo

现在我认为问题出在哪里可能是：

underscore.js 建议在渲染胡子模板之前使用它：

_.templateSettings = {
     evaluate : /\{\[([\s\S]+?)\]\}/g,
     interpolate : /\{\{([\s\S]+?)\}\}/g
};

另外：

interpolate : /\{\{(.+?)\}\}/g

也只是插值语句，我都尝试过。然而我的正则表达式知识真的很差，我有一种感觉它可能无法容纳哈希？无论如何……我完全被难住了。 有人可以帮我吗？

甚至可以这样循环吗？看看下划线来源我不确定： http://documentcloud.github.com/underscore/docs/underscore.html #section-120

非常感谢

Answer 1

今天遇到了这个问题。问题似乎在于 Underscore 进行模板化的顺序：转义、插值，然后求值。因此，您需要显式忽略插值正则表达式中 {{# 的任何匹配项：

_.templateSettings = {
  evaluate:    /\{\{#([\s\S]+?)\}\}/g,            // {{# console.log("blah") }}
  interpolate: /\{\{[^#\{]([\s\S]+?)[^\}]\}\}/g,  // {{ title }}
  escape:      /\{\{\{([\s\S]+?)\}\}\}/g,         // {{{ title }}}
}

它实际上与 Mustache 的工作方式不同：Underscore 模板中没有正确的块，因此没有需要一个结束块 {{/}}。您只需像使用标准下划线模板一样匹配您的语句即可。

Answer 2

我发帖是为了其他面临这个问题的人。
经过大量谷歌搜索无果后，我仔细地浏览了 underscore.js 源代码，基本上你必须使用 underscore 的模板语法，将丑陋的函数处理器写入你的 JSON 或将 Mustache.js 包含到你的源代码中并调用：

Mustache.render(mytemplate,mymodel)

并放弃下划线的

_.template(..) function

烦人但无论如何，我希望能帮助别人

Answer 3

我没有使用 # 符号，但当我尝试使用三重胡子 {{{name}}} 来获取未转义值的设置时，我遇到了类似的错误：

interpolate : /\{\{\{(.+?)\}\}\}/g,
escape : /\{\{(.+?)\}\}/g,

如果这就是您来到这里的原因，以下设置有效

interpolate : /\{\{\{(\s*\w+?\s*)\}\}\}/g,
escape : /\{\{(\s*\w+?\s*)\}\}(?!\})/g,

我尝试了Max的格式，但这对我不起作用，因为我混合了双胡子和三胡子表达式，虽然三胡子表达式工作正常，但它从双胡子中变量名的每一端剥离一个字符IE {{title}} 导致下划线查找名为 itl 的变量