バックボーンにお互いに関連する縦と横のデータを持つテーブルを作成する方法

Question

私は年によって特定のスポーツに参加した国のスポーツチャートを作成しています。

私は国（6か国）のリストを持っています。そして、私は年のリスト（1970年 - 2016年）を持っています。

私はテーブルを持っています。年月が上（横）、国が左（縦）です。 年の各セルの下に、私は（国が参加しているか否か）'Yes'か'No'のいずれかを配置する必要がありますこれは私が私のデータを構造化する方法である：

（左側の）名前のリストを作成する

countries: [ 
    {name: 'UK', years: [ 1999, 2003 ] }, 
    {name: 'US', years: [ 1992, 2005 ] }, 
] 

は簡単でしたが、一番上に何年を作るのかを理解することはできませんでした。

私は別のコレクションに何年もいなければなりませんか？

Answer 1

nameとyears（配列）の2つの属性を持つCountryモデルがあるとします。

テンプレートを使用しているかのように回答します。もしあなたがそうでなければ、論理は同じなのでいいです。

var Countries = Backbone.Collection.extend({ 
    model:Country, 
    tpl:_.template($('#table-tpl').html()), 
    render:function(){ 
     var tableHtml = this.tpl({countries:this.collection.toJSON()}) 
     this.$el.html(tableHtml) 
     return this; 
    } 
}) 

HTMLテンプレート

<script type="text/template" id="table-tpl"> 
<table> 
    <thead> 
     <tr> 
     <th>Country</th> 
      <% _.each(_.range(1970,2017),year=>{%> 
       <th><%= year %></th> 
      <% }) %> 
     </tr> 
    </thead> 
    <tbody> 
     <% _.each(countries, country =>{%> 
      <tr> 
       <td><%= country.name %></td> 
       <% _.each(_.range(1970,2017),year=>{%> 
        <th><%= _.indexOf(country.years, year, true) != -1 ? 'Yes':'No' %></th> 
       <% }) %> 
      </tr> 
     <% }) %> 
    </tbody> 
</table> 
</script> 

注：_.indexOf(country.years, year, true)でtrue入力配列、country.yearsがソートされることを意味します。これにより、より迅速な検索が可能になります。

例フィドル： https://jsfiddle.net/guanzo/nod6g3hy/