javascript - 从 mustache 读取 Json 和更新模板

Question

我有一个 Index.html 文件，我在其中使用容器类。 我有另一个包含 mustache 变量的 html 文件。

这是我正在使用的代码，

假设这是一个.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 模板，但出现错误。 从js获取信息

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

              });
          });
          }

容器 - 在 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>

有人可以指导我吗？为什么我没有在主模板中获取数据。

Answer 1

编辑，

浏览了一些文档 MUSTACHE MANUAL和演示 A Simple Mustache Demo ，以及重新阅读问题，以介绍 Mustache.js .

乍一看，似乎json对象在 brand.json没有 data对应于 {{#data}} 的属性;见http://mustache.github.io/mustache.5.html#Sections在template和 hash的 {{#repo}} .

不确定第二次 ajax 调用的必要性，即 $.get() ？现有#filtersOptions (f) 可以修改 html，以减少对第一个的 ajax 调用，$.getJSON() ？

虽然 ajax 部分重新安排以在 .then() 内处理它们各自的返回值，但此处并未直接提及以上部分回调。

已更改 <script>元素位于 sort_and_filter_lb.html归档到<div> ，供 jsfiddle 处理。

注意，以前没有尝试过Mustache.js

尝试

v2

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

jsfiddle http://jsfiddle.net/guest271314/uhf73/