Javascript 从mustache读取Json并更新模板

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

这是我正在使用的代码

假设这是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>

通过Javascript，我对Json数据进行了处理，并试图对胡须进行处理，但出现了错误。 来自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_和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>

{{{{data}}
{{brand{u name}}
{{/data}

---

谁能给我指点路吗。为什么我没有在主模板中获取数据。

您的代码看起来有点混乱，但很接近。如果要使用外部文件和外部数据渲染模板，请尝试以下操作：

$.getJSON('js/json/brand.json', {}, function(data) {
     // on success, request template
     $.get('files/sort_and_filter_lb.html', function(template_string) {
         // when we have both template and data, render it
         var output = Mustache.render(template_string, {data: data});
         $(".container").html(output);
     });
 });

编辑

浏览了一些文档和演示，以及重读问题，以便介绍

Mustache.js

乍一看，

brand.json的
json
对象似乎没有与
{{data}}
对应的
data
属性；参见
{{repo}
的
模板
和
散列

不确定是否需要第二个ajax调用，即，
$.get（）
？可以修改现有的
#filtersOptions
（
f
）html，以将ajax调用减少到第一个
$.getJSON（）

以上部分在这里没有直接讨论，不过ajax片段被重新安排在
.then（）
回调中处理各自的返回值

将
排序和筛选lb.html
文件中的
元素更改为
，以便JSFIDLE处理

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

试一试

v2

html


{{{#data}
{{品牌名称}
{{/data}

过程模板

js

$（函数（）{
$（“.process按钮”）。单击（“click”，函数（）{
var f=$（'#filtersOptions'）.html（）；
变量_数据={
“品牌”：{
“数据”：[{
“品牌名称”：“阿迪达斯”
}, {
“可用产品”：30
}]
}
};
变量文件=字符串（“”）
+“
{{{#data}}
”
+'' 
+''
+''
+“{{brand_name}}”
+“
{{/data}
”；
var request1=$.post（“/echo/json/”{
json:json.stringify（_数据）
}，函数（数据，文本状态，jqxhr）{
返回数据。品牌；
});
var request2=$.post（“/echo/html/”{
html：文件
}，函数（数据，文本状态，jqxhr）{
返回数据
});
$.when（请求1、请求2）
.然后（函数（a，b）{
log（a[0]，b[0]）；
var html=Mustache.render（b[0]/*或，`f`*/，a[0].brands）；
$（'#container'）.html（html）；
})
});
});

jsiddle
从
$.get（）
得到的预期响应是什么？
template
（来自
$.get（）
的响应）是否被
var template=Mustache.render（f，{data:data}）覆盖？预期的响应是呈现模板，然后传递数据以更新它。基本上，我正在尝试使用jQuery从外部文件加载Mustache.js模板。即使我也尝试使用此模板，但没有运气是
template\u string
和
data
当您
console.log
它们时所期望的结果<代码>模板\字符串
应为胡须模板。
输出的内容是什么？这应该行得通。我尝试过，但模板字符串中的数据没有更新：（模板字符串应该是你的胡子模板。里面有什么？我的模板字符串是这样的
$.getJSON('js/json/brand.json', {}, function(data) {
     // on success, request template
     $.get('files/sort_and_filter_lb.html', function(template_string) {
         // when we have both template and data, render it
         var output = Mustache.render(template_string, {data: data});
         $(".container").html(output);
     });
 });

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

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