javascript - 在同一个元素上调用 Mustache 两次失败？

Question

我有一些代码将 div 的 html() 设置为针对特定 JSON 片段的 Mustache 调用的结果

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

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

第一次调用该函数，没问题。但是，当我用不同的“json_file”调用它时。它失败并出现以下错误:

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

我最初认为问题出在 JSON 文件上，所以我交换了参数名称，但事实并非如此，json 没问题。

然后我添加了一个测试行，我只是在 mustache 调用之前设置了 html，如下所示:

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

而且它根本不起作用。

如果要渲染的元素已经包含内容，Mustache 就不想工作了

有什么办法解决这个问题吗？

Answer 1

解决了

这是页面的标记:

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

原来我用 xml 简写关闭“错误列表”div 效果不佳。我猜它假设我没有正确关闭它，所以模板 div 存在于错误列表中。因此，第一次渲染调用会覆盖模板，这会使第二次调用失败。

将第一行改为

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

成功了

愚蠢的浏览器