Calling Mustache twice on the same element fails?

Question

I have some code which sets the html() of a div to be the result of a Mustache call against a particular piece of JSON

    function render_bugs(json_file){
        $.getJSON(json_file, function(json) {

        $("#bug-list").html(Mustache.to_html($('#template').html(), json));

The first time the function is called, it is fine. However when I call it with a different "json_file". It fails with the following error:

haystack is null    
return haystack.indexOf(this.otag + needle) != -1;

I initially thought the problem was with the JSON file so I swapped the paramter names around but that's not it, the json is fine.

I then added a test line where I just set the html before the mustache call, like so:

    function render_bugs(json_file){
        $.getJSON(json_file, function(json) {

            $('#bug-list').html('<p>foo</p>');
        $("#bug-list").html(Mustache.to_html($('#template').html(), json));

And it doesn't work at all.

It's like Mustache doesn't want to work if the element it is being rendered to has content in it already

Is there any way around this?

Answer 1

Worked it out

This was the markup for the page:

        <div id="bug-list" />
        <div id="template">
            <p><strong>{{bugs}}</strong> bugs found in mingle</p>
            {{#repos}}
            <h2>{{repo-name}}</h2>
                <ol>
                    {{#hotspots}}
                        <li>
                        <p class="file-name"><a>{{score}} - {{file}}</a></p>
                            <ol>
                                <li><em><span class="line-number">{{lines}}</span> lines of code</em></li>
                                <li><em><span class="traits">{{traits}}</span> traits mixed in</em></li>
                                {{#commits}}
                                <li>
                                    <strong>{{date}}</strong> - {{message}}
                                    <div class="code">{{{change}}}</div></li>
                                {{/commits}}
                            </ol>
                        </li>
                    {{/hotspots}}
                </ol>
            {{/repos}}
        </div>

Turns out me closing the "bug-list" div with the xml short-hand doesn't play nice. I'm guessing it assumed that I hadn't closed it properly and so the template div lived inside bug list. Therefore the first render call would overwrite the template and that would make the second call fail.

By changing the first line to

<div id="bug-list"></div>

It worked

Stupid browsers