小胡子格式的骨干/下划线模板导致#pound / hash符号出错?

时间:2012-01-25 11:49:17

标签: javascript regex backbone.js underscore.js mustache

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

我已经在项目的其他地方成功使用了它,但现在我第一次使用来自小胡子的循环列表模式来填充模板,这会抛出一个我感到有点困惑的错误。 chrome中的错误是:

"Uncaught SyntaxError: Unexpected token ILLEGAL"

并在回溯中指向下划线的模板函数,这是非常没用的但是在firebug中我得到了一个更有用的错误:

enter image description here

建议哈希符号'#'是问题,这是有道理的,因为我知道胡子工作正常,因为项目的许多其他部分使用得很好,这也是我第一次使用我的模板中的哈希sybol。它看起来像循环功能或下划线的插值/模板设置的问题。

这是我模板的相关部分:

<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

非常感谢

3 个答案:

答案 0 :(得分:23)

今天遇到了这个问题。问题似乎是Underscore执行模板的顺序:转义,插值,然后评估。因此,您需要在插值正则表达式中明确忽略{{#的任何匹配项:

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

它实际上与Mustache的工作方式不同:Underscore的模板中没有正确的块,因此不需要关闭块{{/}}。您只需要像使用标准的Underscore模板一样匹配您的语句。

答案 1 :(得分:7)

我发帖是为了解决这个问题的其他人。 经过大量的谷歌搜索无济于事,我通过一个精细的齿梳来检查underscore.js源代码,基本上你必须使用下划线的模板语法,在你的JSON中写入丑陋的函数处理器或者将mustache.js包含在你的源代码中并调用:

Mustache.render(mytemplate,mymodel)

并且预示着下划线的

_.template(..) function

烦人但无论如何,我希望能帮到某人

答案 2 :(得分:1)

我没有使用#符号,但是当我尝试使用三重胡须{{{name}}}来设置非转义值时,我遇到了类似的错误:

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

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

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

我尝试了Max的格式,但这对我不起作用,因为我有混合的双胡须和三胡子表达式,而三重表达式工作正常,它是从双胡子变量名的每一端剥去一个字符,即{{title}}导致强调查找名为itl

的变量