CODEWITHSUNDEEP
javascriptmustache
user1886549
user1886549

Reputation: 63

Mustache nested structures unclosed section bug

I have this very simple structure which can not be parsed with mustache and always returns:

Unclosed section: selected

<ul id="source">
{{#recomms}}                                                                                                                                                                                                 
  <li>
    <select>
      {{#sizes}}
        <option {{#selected}}selected="selected"{{/selected}} >{{label}}</option>
      {{/sizes}}
    </select>
  </li>
{{/recomms}}
</ul>

Rendering javascript:

$("#placement").html(Mustache.render($('#source').html(), data));

If I move #{{selected}} out of an option tag it starts to work properly.

Does mustache support these nested #{{ tags placed within html elements ?

Upvotes: 6

Views: 13072

Answers (2)

ice thailand
ice thailand

Reputation: 393

Surround your ul tag <ul id="source"> with <script type="text/template" id="source">

Result should like this

<script type="text/template" id="source">
    <ul>
        {{#recomms}}
        <li>
            <select>
                {{#sizes}}
                <option {{#selected}} selected="selected" {{/selected}}>{{label}}</option>
                {{/sizes}}
            </select>
        </li>
        {{/recomms}}
    </ul>
</script>

Upvotes: 0

Jed Watson
Jed Watson

Reputation: 20378

Mustache should work like this, you are doing it correctly.

It is a simple text parser and so doesn't care about HTML structure / tags / etc.

Which environment / parser version are you using for Mustache? As this appears to work in the official demo.

I entered the following in the Mustache demo site and it works as expected:

Mustache Template

<ul id="source">
{{#recomms}}                                                                                                                                                                                                 
  <li class="">
    <select name="size" class="recommendation-size">
      {{#sizes}}
        <option value="{{val}}" {{#selected}}selected="selected"{{/selected}} >{{label}}</option>
      {{/sizes}}
    </select>
  </li>
{{/recomms}}
</ul>

Sample JSON

{"recomms": [
    {"sizes": [
        { "val": "value", "label": "label", "selected": false },
        { "val": "value2", "label": "label2", "selected": true }
    ]}
]}

Output

<ul id="source">
<li class="">
<select name="size" class="recommendation-size">
<option value="value" >label</option>
<option value="value2" selected="selected">label2</option>
</select>
</li>
</ul>

If you can link to a Fiddle that exhibits the error you're getting it would help figure out what's going on, but this should work.

EDIT

I may have discovered the problem. You're loading the HTML from an existing HTML element using jQuery, which means that the browser will already have tried to render the HTML and discarded the invalid bits, including the {{/selected}} bit.

Try using a different technique for loading the Mustache template into your Javascript code, such as...

  • Put the template in a Javascript variable instead of in the HTML source of the page
  • Load the template from the server using jQuery.get()
  • Escape the < and >'s in the template and put it in a hidden textarea, then use jQuery's .val() method to get the template and unescape the < and >'s before you render it

As you noted in the comment, the first option works well!

Upvotes: 7

Related Questions