Question

我有一个Index.html文件，我正在使用容器类。我有另一个包含胡子变量的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数据并尝试使用胡子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);

              });
          });
          }

容器 - 在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}};请参阅template的{{1}}和hash的{{1}} {/ 3}}。

不确定第二个ajax呼叫的必要性，即{{#repo}}？可以修改现有的$.get()（#filtersOptions）html，以将ajax调用减少到第一个f？

上面的部分没有直接在这里解决，虽然ajax片段重新安排在$.getJSON()回调中处理它们各自的返回值。

将.then()文件中的<script>元素更改为sort_and_filter_lb.html，以供jsfiddle处理。

注意，之前没有尝试<div>

尝试

V2

HTML

Mustache.js

JS

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

jsfiddle http://mustache.github.io/mustache.5.html#Sections

Answer 2

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

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

阅读Json并从胡子中更新模板

2 个答案: