0

我正在使用客户端模板在我的第一个站点上工作，到目前为止一切都很好。我只是希望为下面的代码实现最佳性能。

我得到了这种格式的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"
            }
        ]
    }
]

并使用下面的 underscore.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>，在该表中我正在构建<th>月份（即一月、二月、三月等），然后我在<td>'s中分隔月份值

而不是_.(each像我上面所做的那样使用相同的数据（但回显不同的值）执行两个语句，实现所需输出的最佳方法是什么？

4

1 回答 1

2

如果您在将 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部分将以嵌套数据数组的形式包含所有数据行。

* 我使用行计数器将一年中的两个部分（从幻灯片 0 和幻灯片 1）与模数合并，但您可能需要为此部分添加一些验证，以确保您在表格中保持连贯性

于 2013-08-08T13:14:55.590 回答