Ember.js 带有余烬数据的“电子表格”数据模型

我试图用余烬数据表示一个类似于“电子表格”的数据模型

主要原因是我想将.CSV数据加载到此模型结构中，并从面向列和面向行的角度查看数据

我事先不知道.CSV的内容是什么，所以据我所知，基于行的列名数据模型将无法工作

我有四种主要型号：

App.DataSet = DS.Model.extend({
  name: attr('string'),
  columns: hasMany('column', {async:true}),
  rows: hasMany('row', {async:true})
});

App.Column = DS.Model.extend({
  dataSet: belongsTo('data-set'),
  name: attr(),
  cells: hasMany('cells',{async:true})
});

App.Row = DS.Model.extend({
  dataSet: belongsTo('data-set'),  
  cells: hasMany('cell',{async:true})
});

App.Cell = DS.Model.extend({
  row: belongsTo('row'),
  column: belongsTo('column'),
  value: attr()
});

我已经为模型创建了一些夹具数据，虽然欢迎提出任何更好的方法的建议，但它似乎是有效的

我现在尝试在表中显示数据。我的索引控制器是一个ArrayController，它从存储中查找“数据集”。我的模板看起来像：

<div>
  <h1>Data/h1>
  <ul>
  {{#each d in model}}
  <li>
    {{d.name}}
    <br>

    <table>
      <thead>
        <tr>{{#each col in d.columns}}<td>{{col.name}}</td>{{/each}}</tr>
      </thead>
      <tbody>
        {{#each row in d.rows}}
          <tr>
            {{#each cell in row.cells}}<td>{{cell.column.id}}&nbsp;{{cell.value}}</td>{{/each}}
          </tr>
        {{/each}}
      </tbody>
    </table>
  </li>
  {{/each}}
  <ul>
</div>

渲染时，我发现对于某些行，单元格相对于列的顺序是正确的，而对于其他行，则不是。我包括一个屏幕截图来说明这一点

如何以正确的列顺序渲染每个单元格

谢谢

---

迈克尔

没有看到你的赛程数据很难说。如果您依赖于JavaScript对象属性/键顺序，那么这可以解释这个问题，因为JavaScript没有定义对象属性的任何顺序。我猜您的row.cells没有保持与d.columns相同的顺序。在使用row.cells之前，需要根据cell.column中的值对其进行排序，以便单元格的顺序与d.columns相同。这可能需要在项目控制器中为行定义另一个负责排序的属性，并在each而不是row.cells中使用该属性。