javascript - backboneunderscore template in mustache format causing error on # poundhash symbol? - Stack Overflow

admin管理员组

文章数量:1193758

I'm using backbone's underscore templating engine with the mustache formatting patterns.

I have already been successfully using it elsewhere in the project but now for the first time I'm using the looping list patterns from mustache to populate the template which is throwing an error which I'm a bit baffled by. The error in chrome is:

"Uncaught SyntaxError: Unexpected token ILLEGAL"

and points to underscore's template function in the backtrace, which is pretty useless but in firebug i get a more helpful error like this:

Suggesting that the hash symbol '#' is the issue, which would make sense as I know that mustache is working ok as there are many other parts of the project using it well, also this is the first time I'm using the hash sybol in my templates.It looks like a problem either with the looping feature or with the interpolation/template settings for underscore.

Here's the relevant piece of my template:

<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>

and here's a sample of the JSON (which all validates fine)

{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....}

I was initially following this example here for reference:

NOW HERES WHERE I THINK THE PROBLEM MIGHT BE:

underscore.js suggests using this before rendering a mustache template:

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

also:

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

Also just the interpolate statement, ive tried both. However my regex knowledge is really poor and I have a feeling it might not accomodate the hash? At any rate.... I'm totally stumped. Can someone help me out here?

is it even possible to loop like this? looking at underscore source i'm not sure: .html#section-120

Thanks very much

I'm using backbone's underscore templating engine with the mustache formatting patterns.

I have already been successfully using it elsewhere in the project but now for the first time I'm using the looping list patterns from mustache to populate the template which is throwing an error which I'm a bit baffled by. The error in chrome is:

"Uncaught SyntaxError: Unexpected token ILLEGAL"

and points to underscore's template function in the backtrace, which is pretty useless but in firebug i get a more helpful error like this:

Suggesting that the hash symbol '#' is the issue, which would make sense as I know that mustache is working ok as there are many other parts of the project using it well, also this is the first time I'm using the hash sybol in my templates.It looks like a problem either with the looping feature or with the interpolation/template settings for underscore.

Here's the relevant piece of my template:

<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>

and here's a sample of the JSON (which all validates fine)

{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....}

I was initially following this example here for reference: http://mustache.github.com/#demo

NOW HERES WHERE I THINK THE PROBLEM MIGHT BE:

underscore.js suggests using this before rendering a mustache template:

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

also:

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

Also just the interpolate statement, ive tried both. However my regex knowledge is really poor and I have a feeling it might not accomodate the hash? At any rate.... I'm totally stumped. Can someone help me out here?

is it even possible to loop like this? looking at underscore source i'm not sure: http://documentcloud.github.com/underscore/docs/underscore.html#section-120

Thanks very much

• javascript
• regex
• backbone.js
• underscore.js
• mustache

Share Improve this question Follow edited Mar 16, 2012 at 18:48 Alex asked Jan 25, 2012 at 11:49 AlexAlex 3,79055 gold badges4040 silver badges6060 bronze badges 3

• The pattern /\{\{([\s\S]+?)\}\}/g will match {{#foo}} and capture #foo. You could avoid capturing the hash by using /\{\{#?([\s\S]+?)\}\}/g, altho I think it will cause other problems. – Qtax Commented Jan 25, 2012 at 12:06
• did you ever manage to loop like this? I would really like to, it's very annoying in underscore to write out a simple if across multiple evaluate lines to check if a flag is present in my JSON. – Daniel Commented Feb 2, 2012 at 20:34
• hey, sadly underscore won't do it natively, you have to include mustache.js and do mustache.render, as below.. It's really annoying i agree – Alex Commented Feb 3, 2012 at 11:48

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 22

Came up against this problem today. The issue seems to be the order that Underscore does the templating: escape, interpolate, then evaluate. So you need to explicitly ignore any matches for {{# in your interpolation regex:

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

It doesn't actually work the same way as Mustache: there aren't proper blocks in Underscore's templating, so there is no need for a closing block {{/}}. You just need to match your statements up like you would with standard Underscore templates.

I'm posting for the sakes of anyone else facing this issue. After a lot of googling to no avail, i went through the underscore.js source with a fine toothed comb and basically you have to either use underscore's template syntax, writein ugly function processors into your JSON or include mustache.js into your source and call:

Mustache.render(mytemplate,mymodel)

and foresake underscore's

_.template(..) function

Annoying but whatever, I hope that helps someone

I am not using the # symbol but I experienced a similar error once I tried to use the triple mustache {{{name}}} for unescaped values with the setting:

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

If that's the reason you came here, the following setting works

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

I tried Max's format but that didn't work for me because I have a mix of double and triple mustache expressions and while the triple expression worked fine it was stripping a character from each end of the variable name in the double mustache i.e. {{title}} led to underscore looking for a variable named itl

本文标签： javascriptbackboneunderscore template in mustache format causing error onpoundhash symbolStack Overflow