javascript - 阅读Json并从 mustache 更新模板

我有一个Index.html文件，其中使用了container类。
我有另一个包含胡子变量的html文件。
这是我使用的代码，
假设这是a.html。

<script id="filtersOptions" type="text/html">
    <ul class="checkboxCommonContent">
    {{#data}}
    <li>
    <div>
    <input type="checkbox" id="checkbox-1-1" class="regular-checkbox"><label for="checkbox-1-1"></label><span class="lblText">{{brand_name}}</span>
    </div>
    </li>
    {{/data}}

    </ul>

我有一个json文件，其中的品牌信息如下，

{
    "brands":[
        {
            "brand_name":"Adidas",
            "available_products":30
        }

    ]
}

通过Javascript，我对Json数据进行了细化，并尝试修改mustache tempalte，但得到了错误。
来自js的Featchng信息

loadFileForFilters: function(){


    $.getJSON('js/json/brand.json', {}, function(data, textStatus, jqXHr) {
              console.log(data);
              var f = $("#filtersOptions").html();
              $.get('files/sort_and_filter_lb.html', function(template, textStatus, jqXhr) {
                  var template = Mustache.render(f, {data: data});
                  //$(".container").html(template);

              });
          });
          }

容器-位于side index.html中。
sort_and_filter_lb.html文件包含以下代码

<script id="filtersOptions" type="text/html"><ul class="checkboxCommonContent"> {{#data}} <li> <div> <input type="checkbox" id="checkbox-1-1" class="regular-checkbox"><label for="checkbox-1-1"></label><span class="lblText">{{brand_name}}</span> </div> </li> {{/data}} </ul> </script>

有人能指引我吗。为什么我没有在主模板中获取数据。

最佳答案

编辑，
浏览了一些文档MUSTACHE MANUAL，演示A Simple Mustache Demo，以及重读问题，以介绍Mustache.js。
乍一看，似乎json处的brand.json对象不具有对应于data的{{#data}}属性；请参见template处的http://mustache.github.io/mustache.5.html#Sections和hash处的{{#repo}}。
不确定是否需要第二次ajax调用，即$.get()？现有的#filtersOptions（f）HTML可以修改，以减少Ajax调用到第一个，$.getJSON()？
尽管ajax部分被重新安排以在.then()回调中处理它们各自的返回值，但上面的部分并没有在这里直接处理。
将<script>文件中的sort_and_filter_lb.html元素更改为<div>，以便jsfiddle处理。
注意，以前没有尝试过Mustache.js
尝试
第二版
html格式

<script id="filtersOptions" type="text/html">
    <ul class="checkboxCommonContent"> {{#data}}
    <li> <div> <input type="checkbox"
    id="checkbox-1-1"
    class="regular-checkbox" /> <label
    for="checkbox-1-1"> </label><span class="lblText">{{brand_name}}</span> </div>
    </li> {{/data}}

    </ul>
</script>
<div class="process">
    <button>Process Template</button>
</div>
<div id="container"></div>

js公司

$(function () {

    $(".process button").on("click", function () {

        var f = $('#filtersOptions').html();

        var _data = {
            "brands": {
                "data": [{
                    "brand_name": "Adidas"
                }, {
                    "available_products": 30
                }]
            }
        };

        var file = String('<div id=filtersOptions type=text/html>'
                          +'<ul class=checkboxCommonContent> {{#data}} <li>'
                          +'<div>'
                          +'<input type=checkbox id=checkbox-1-1 class=regular-checkbox>'
                          +'<label for=checkbox-1-1></label>'
                          +'<span class=lblText>{{brand_name}}</span>'
                          +'</div> </li> {{/data}} </ul> </div>');

        var request1 = $.post("/echo/json/", {
            json: JSON.stringify(_data)
        }, function (data, textStatus, jqxhr) {
            return data.brands;
        });

        var request2 = $.post("/echo/html/", {
            html: file
        }, function (data, textStatus, jqxhr) {
            return data
        });
        $.when(request1, request2)
            .then(function (a, b) {
            console.log(a[0], b[0]);
            var html = Mustache.render(b[0] /* or , `f` */, a[0].brands);
            $('#container').html(html);
        })
    });
});

jsfiddlehttp://jsfiddle.net/guest271314/uhf73/