лучший способ построить заголовки таблиц и данные отдельно, используя один и тот же json в 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"
            }
        ]
    }
]

и используя шаблон 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>

Вместо того, чтобы делать два оператора _.(each с одними и теми же данными (но отображающими разные значения), как я делаю выше, какой лучший способ добиться желаемого результата?


javascript coding-style underscore.js client-side-templating
person Kingsley    schedule 08.08.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Если вы предварительно обработаете свои данные 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) с модулем, но вам, возможно, придется добавить некоторую проверку для этого раздела, чтобы убедиться, что вы сохраняете согласованность в своей таблице.

person JF Dion    schedule 08.08.2013
comment
Большое спасибо, это помогает! Определенно выглядит менее раздутым и более модульным - person Kingsley; 12.08.2013