在underscore.js中使用相同的json分別構建表標題和數據的最佳方法？

Question

我正在使用客戶端模板工作我的第一個網站，到目前為止一直很好。 我只是想為下面的代碼實現最佳性能。

我以這種格式給了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>這個月（即1月，2月，3月等），然后我就是分隔<td>的月份值

而不是做兩個_.(each語句具有相同的數據（但回顯不同的值），正如我上面所做的那樣，實現所需輸出的最佳方法是什么？

Answer 1

如果在使用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）與模數合並，但您可能需要為此部分添加一些驗證，以確保在表中保持連貫性