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>for each スライドを構築しており、その中に Horizo​​ntal 、<table>そのテーブルで<th>月 (つまり、1 月、2 月、3 月など) を構築しています。<td>

上記のように同じデータを使用して (ただし異なる値をエコーする) 2 つのステートメントを実行するのではなく_.(each、目的の出力を実現するための最良の方法は何ですか?

4

1 に答える 1

2

印刷に使用する前に JSON データを前処理すると、ネストされた の数を減らすことができます_.each。

データを表示するには、2 つの_.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部分にはデータのネストされた配列の形式ですべてのデータ行が含まれます。

* 行カウンターを使用して、年の 2 つの部分 (スライド 0 とスライド 1 から) をモジュラスでマージしましたが、テーブル内で一貫性を保つために、このセクションにいくつかの検証を追加する必要がある場合があります

于 2013-08-08T13:14:55.590 に答える