Help with designing a table with dynamic columns using ember data

Ember Data
1

I want to build a table using ember 1.9 and ember data. This means that since I’m using handlebars 2.0, I can’t use Addepar/Ember-Table.

My initial design went something like this.

App.Source = DS.Model.extend({
    name: DS.attr('string'),
    primary: DS.attr('boolean'),
    published: DS.attr('boolean'),
    sort: DS.attr('number'),
    summaryRows: DS.hasMany('summaryRow', {
        async: true,
    })
});

App.SummaryRow = DS.Model.extend({
    locationId: DS.attr('string'),
    locationName: DS.attr('string'),
    cells: DS.hasMany('cell', {
      async: true
    }),
    source: DS.belongsTo('source')
});

App.Cell = DS.Model.extend({
  hexColor: DS.attr('string'),
  name: DS.attr('string'),
  optionId: DS.attr('number'),
  options: DS.hasMany('option', {
    async: true
  }),
  summaryRow: DS.belongsTo('summaryRow')
});

App.Option = DS.Model.extend({
  name: DS.attr('string'),
  hexColor: DS.attr('string'),
  cell: DS.belongsTo('cell')
});

The issue with doing it this way, is its going to make a request for 50 summary rows, then each of those summary rows is going to make a request to get its values (so that’s 50 requests because I am using the links hash and not sending IDS, which also means I can’t sideload data). Then when they click on the value (individual cell) I want to open up a model that they can change which option is currently selected in that cell (or value).

What is the best way to make a table and model the table data with ember data?

2

Normally a table represents one model with each column a field. If you have an EAV table then you may wish to pivot the data on the server or on the client side before shoving it into your table view.

If your models truly represent the structure you need ie every cell really has unique options and this is basically what your db looks like. You will probably have to do something custom. Even if you had used ember-table it would not handle data like this very elegantly.

3

That is really what my data looks like. One thing to note is that you wont have to load the hasMany options relationship until a cell is clicked on to be edited. So where Im running in to trouble is we have to load the summaryRows then load all the cells for each summary row.

I think perhaps my best solution is to load the summaryRows via the links attribute (so one call will be made) then return a list of ID’s for each cell in the summaryRow. That way ember can coalesce the find call to only make one call to load all of the data. Then when the item is clicked on go to a links object that was in the cell and go get the options.

4

If you’re worried about lots of requests. You could also make some sort of custom call that pulls all the data together in whatever format you want and then parse and push onto the ember store on the client side.

OR

you could call

cells?sourcId=:sourcId
summary-rows?sourcId=:sourcId

before you call for source so that it resolves all those relationships with only 3 requests.