如何使用 Handlebars 和 jQuery 渲染数据
How to render data with Handlebars and jQuery
我有这个html,我需要在其中呈现数据
默认.hbs
<div class="chart-container" data-action="chartContainer">
<ul>
<li class="department">
<h3>Enterprise</h3>
<ul class="sections">
// HERE I NEED TO RENDER THE DATA IN AN <li> TAG
</ul>
</li>
</ul>
</div>
这是代码
APP.chartContainer = (function () {
var Handlebars = window.Handlebars;
var bindEventsToUI = function () {
$.getJSON('maindata.json')
.done(function(data) {
localStorage.setItem('jsonData', JSON.stringify(data));
}).fail(function(err) {
console.log(err);
});
var chartContainerTemplate = $(".chart-container").html();
var theTemplate = Handlebars.compile(chartContainerTemplate);
var getData = localStorage.getItem('jsonData');
var iterateObj = $.each(JSON.parse(getData), function(key, val) {
return val;
});
var theCompiledHtml = theTemplate(iterateObj[0].enterprise);
$(".sections").append(theCompiledHtml);
};
var init = function (element) {
bindEventsToUI();
};
/**
* interfaces to public functions
*/
return {
init: init
};
}());
函数iterateObj
返回此
[
{
"enterprise":[
{
"id":"10",
"name":"Hellen Quesada",
"role":"Principal Software Engineer"
},
{
"id":"11",
"name":"Jonathan Chavez",
"role":"Principal Creative Engineer"
}
]
},
{
"consumer":[
{
"id":"18",
"name":"Helga Martinez",
"role":"Production Manager"
},
{
"id":"19",
"name":"Leroy Bernard",
"role":"Sr. Software Engineer"
}
]
}
]
但是我现在需要渲染的只是数据的企业部分,这就是为什么在我的函数中我正在做iterateObj.[0].enterprise
但我还没有在 DOM 中得到任何东西,我如何在对象中正确迭代以获得我需要的数据的渲染?
我错过了什么?
模板必须是脚本而不是 html。该脚本可以包含所需的 html。
<script id="foo" type="text/x-handlebars-template">
<div class="chart-container" data-action="chartContainer">
<ul>
<li class="department">
<h3>Enterprise</h3>
<ul class="sections">
//Not really sure what you want here
//But access the data like this
<li>{{enterprise.id}}</li>
</ul>
</li>
</ul>
</div>
</script>
然后编译模板(即脚本):
//var chartContainerTemplate = $(".chart-container").html();
//rename the script to a better id
var chartContainerTemplate = $("#foo").html();
最后,我强烈建议阅读文档。有多种循环和访问数据的方法。上面的模板是非常基本的。
相关文章:
- 用程序搜索JQuery数据表中的文本
- 使用jquery将mysql数据获取到新的表行中
- jQuery最近父级的数据属性选择器
- 用我的json数据填充JQuery DataTable
- jquery创建的数据-*有时无法解析
- Jquery在触摸屏上添加类和数据
- 使用jquery读取Json数据
- 使用Javascript/JQuery获取JSON GET数据
- 如何使用jquery ajax和jsonp在您自己的域上读取json数据
- Jquery:对返回JSON数据的php脚本的Ajax调用
- Jquery(多读/少读)在从数据库加载整个数据后不起作用
- 获取单字段数据Jquery
- 验证数据 jQuery Handsontable 输入
- 带有自定义格式的C#Web服务json数据jquery ui
- 过帐表单数据Jquery
- 在文档准备好之前从服务器获取AJAX数据(jQuery)
- 使用ajax获取数据jquery
- 将格式数据jquery从long更改为short
- 使用Ajax发送数据Jquery
- 获取文本区域和文本字段数据- jquery