我有一个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/