在underscore.js中使用相同的json分别构建表标题和数据的最佳方法
best method to build table headings and data separately using same json in underscore.js?
我正在使用客户端模板制作我的第一个站点,到目前为止一切都很好。我只是希望为下面的代码实现最佳性能。
我得到的json格式如下:
[
{
"slidenumber": "slide0",
"title": "Sample Data 1",
"slideDelay": "2000",
"months": [
{
"Jan": "10.3",
"Dec": "65",
"Nov": "87",
"Oct": "80",
"Sep": "70",
"Aug": "100"
}
]
},
{
"slidenumber": "slide1",
"title": "Sample Data 2",
"slideDelay": "2000",
"months": [
{
"Jul": "10",
"Jun": "20",
"May": "30",
"Apr": "40",
"Mar": "50",
"Feb": "60"
}
]
}
]
并使用下面的undercore.js模板:
_.each(slides, function(slide){ %>
<li data-slide-delay="<%= slide.slideDelay %>">
<h1><%= slide.title %></h1>
<table class="table">
<thead>
<tr>
<%
_.each( slide.months, function(month) {
if (_.isObject(month)) {
_.each(month, function(value, key) {%>
<th><%= key %></th>
<%})
}
});%>
</tr>
</thead>
<tbody>
<tr>
<%
_.each( slide.months, function(month) {
if (_.isObject(month)) {
_.each(month, function(value, key) {%>
<td><%= value %></td>
<%})
}
});%>
</tr>
</tbody>
</table>
</li>
基本上,我是用上面的数据制作一个幻灯片,所以每个"幻灯片"都有特定的字段标题、延迟等,另一方面,几个月内都有数据。我为每张幻灯片构建一个<li>
,在其中构建一个水平的<table>
,在该表中,我为月份(即1月、2月、3月等)构建<th>
,然后在<td>
的中分离月份值
与我上面所做的使用相同数据(但响应不同值)的两个_.(each
语句不同,实现所需输出的最佳方法是什么?
如果在使用JSON数据进行打印之前对其进行预处理,则可以减少嵌套_.each
的数量。
您仍然需要使用两个_.each
语句来显示您的数据。
这样做的真正好处是,您可以集中数据处理,并通过添加抽象级别将数据与显示解耦。如果你的数据结构随着时间的推移而改变,你只需要修改数据处理部分,你的"视图"将保持不变
var headers = [];
var content = [];
var rows = 0;
_.each(slides, function(slide){
if (rows % 2 == 0) {
content.push([])
}
_.each(slide.months, function(month) {
if (_.isObject(month)) {
_.each(month, function(value, key) {
headers.push(key);
content[content.length - 1].push(value);
})
}
rows += 1;
})
});
console.log(headers);
console.log(content);
headers
部分将是月份标签,content
部分将以嵌套数据数组的形式包含所有数据行。
*我使用了一个行计数器来将一年中的两个部分(来自slide0和slide1)与模数合并,但您可能需要为这一部分添加一些验证,以确保您在表中保持一致
相关文章:
- CSS-如何定位内容数据标题
- 我应该如何从xml文件构建一个javascript页面
- 如何在DOM元素上按类型构建此函数
- 在PHP中使用javascript更改页面标题'if'
- Sencha Touch构建-排除文件
- Brightcove获取/显示HTML中的当前视频标题和描述
- RubyonRails——构建交互式接口应该朝哪个方向发展
- React组件-设置页面标题
- jQuery动态更改标题
- HighCharts长标题文本在某些元素上重叠
- 将行添加到具有固定标题的HTML表中
- CKEditor v4:自制插件中对话框的动态标题
- 如何在构建node-webkit应用程序后获取外部资源
- Ext.js从json构建模型关系的问题
- 如何在自动完成时设置属性标题
- 如何为生产构建angular2应用程序
- 单元格的工具提示或标题不显示超过2000个字符
- Grunt构建导致Angular应用程序在dist上崩溃
- 在underscore.js中使用相同的json分别构建表标题和数据的最佳方法
- 在逐级滚动的列表中构建持久的标题