Dynamic dependent keys

1
  • Table component has a model and columns property. Model is an array of objects, columns is an array of the columns we want to show.
  • In the table component there are nested row components.
  • Row component’s cells property is computed from it’s row property (one elem from the model), and table component’s columns array.
  • In this case cells listen to the change of row’s name property, and works fine, but It should care about all property from the columns array. Which is dynamically set. Ex. I want to use the table with the car model , which has [‘speed’, ‘HP’, ‘color’] properties. Let’s say I want to show only two columns; then I could do {{my-table model=car columns=[speed', 'color'] }} and the component build the table, and react on each change of each record.
App.MyTableRowComponent = Ember.Component.extend({
  tagName:'tr',
  table: Ember.computed.alias('parentView'),
  cells: Ember.computed('row.name',function(){
   var row = this.get('row');
    var res = [];
    var self = this;
   
    this.get('table.columns').forEach(function(item){
      console.log(row.get(item));
      res.push(row.get(item));
      
    });
    return res;
  })

here is the whole jsbin: http://emberjs.jsbin.com/jinusahoso/1/edit?html,js,output