在同一条路线上设置多个 ember-light-table

Question

我刚开始使用 ember.js 和 ember-light-table。我有一个使用 ember-light-table 的响应式表的工作示例。以下是我用来生成此表的文件。我不知道如何在同一条路线上显示两个不同的 ember-light-table。本质上，当我以相同的方式构建另一个表时，我必须在路径上的 setupController 挂钩中设置模型变量。但是，我不能将两个表的模型设置为相同的模型变量（希望这是有道理的）。在同一条路线上设置两个 ember-light-table 的最佳做法是什么？任何帮助都非常感谢，谢谢。

// 混音

import Ember from 'ember';
import Table from 'ember-light-table';

const {
  Mixin,
  inject,
  isEmpty,
  set,
  get
} = Ember;

export default Mixin.create({
  store: inject.service(),

  page: 0,
  limit: 10,
  dir: 'asc',
  sort: 'HT_OverUnder',

  isLoading: false,
  canLoadMore: true,

  model: 'nba',
  columns: null,
  table: null,

  init() {
    this._super(...arguments);

    let table = new Table(get(this,'columns'), get(this,'model'), { enableSync: true });
    let sortColumn = table.get('allColumns').findBy('valuePath', get(this,'sort'));

    // Setup initial sort column
    if (sortColumn) {
      sortColumn.set('sorted', true);
    }

    set(this,'table',table);
  },

  fetchRecords() {
    console.log("fetch records: " );
    set(this,'isLoading', true);
    get(this,"store").query('nba', {per_page: get(this,"limit"), page: get(this,"page")}).then(records => {
      var model = get(this,'model');
      records.forEach(function(record){
        model.addObject(record._internalModel);
      });
      set(this,'isLoading', false);
      set(this,'canLoadMore', !isEmpty(records));
    });
  },

  actions: {
    onScrolledToBottom() {
      if (get(this,'canLoadMore')) {
        this.incrementProperty('page');
        this.fetchRecords();
      }
    },

    onColumnClick(column) {
      if (column.sorted) {
        this.setProperties({
          dir: column.ascending ? 'asc' : 'desc',
          sort: column.get('valuePath'),
          canLoadMore: true,
          page: 0
        });
        get(this,'model').clear();
      }
    }
  }
});

// 组件.js

import Ember from 'ember';
import NbaTable from '../mixins/nba-table';
import _ from 'underscore';
import moment from 'moment';

const {
  Component, computed, inject: { service }, get, set, run, $
} = Ember;

export default Component.extend(NbaTable, {
  successMessage: null,
  errorMessage: null,
  session: service('session'),
  userData: Ember.computed('session.session.content.authenticated', function() {
    var authenticator = Ember.getOwner(this).lookup('authenticator:jwt'),
        session = this.get('session.session.content.authenticated'),
        tokenData = {};

    if(session && Object.keys(session).length > 0) {
      tokenData = authenticator.getTokenData(session.token);
    }

    return tokenData.email;
  }),

  model: [],
  table: null,
  picks: [],
  currentGame: {},

  actions: {
    onAfterResponsiveChange(matches) {
      if (matches.indexOf('jumbo') > -1) {
        this.get('table.expandedRows').setEach('expanded', false);
      }
    }
  },

  columns: computed(function() {
    return [{
      label: 'Gametime',
      valuePath: 'gametime',
      sortable: true,
      align: 'center',
    },{
      label: 'Away Team',
      valuePath: 'imgAT',
      sortable: true,
      align: 'center',
      cellComponent: 'awayteam-image'
    }, {
      label: 'Home Team',
      valuePath: 'imgHT',
      sortable: true,
      align: 'center',
      cellComponent: 'hometeam-image'
    }, {
      label: 'Home Spread',
      valuePath: 'spreadDisplay',
      sortable: true,
      align: 'center',
      cellComponent: 'ht-spread'
    }, {
      label: 'Game Total',
      valuePath: 'HT_OverUnder',
      sortable: true,
      align: 'center',
      cellComponent: 'ht-total'
    }, {
      label: 'Info',
      align: 'center',
      sortable: false,
      width: '50px',
      cellComponent: 'info-modal'
    }, {
      label: 'Select Picks',
      align: 'center',
      sortable: false,
      width: '200px',
      cellComponent: 'toggle-switch'
    }];
  })

});

// Route.js

import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';

const {
  Route,
  RSVP: { hash },
  get
} = Ember;

export default Route.extend(AuthenticatedRouteMixin, {
  model() {
    return hash({
      nba: this.store.findAll('nba'),
      ncaa: this.store.findAll('ncaa')
    });
  },

  setupController(controller, model) {
    this._super(...arguments);

    /** I know this is wrong, but don’t know how to fix it **/
    controller.set('model', model.nba );
    controller.set('model', model.ncaa );
  },

  actions: {
    invalidateSession: function() {
      get(this,'session').invalidate();
    }
  }

});

// 模板/组件

{{#light-table table tableClassNames="table table-striped table-hover"
  responsive=true
  onAfterResponsiveChange=(action 'onAfterResponsiveChange') 
  as |t|
}}

  {{t.head
    onColumnClick=(action 'onColumnClick')
    iconAscending='fa fa-sort-asc'
    iconDescending='fa fa-sort-desc'
  }}

  {{#t.body
    canSelect=false
    expandOnClick=false
    as |body|
  }}
    {{#body.expanded-row as |row|}}
      {{responsive-expanded-row table=table row=row}}
    {{/body.expanded-row}}

    {{#if isLoading}}
      {{#body.loader}}
        {{table-loader}}
      {{/body.loader}}
    {{/if}}
  {{/t.body}}

  {{#t.foot as |columns|}}
    <tr style="background-color: lightgray">
      <td class="align-center" colspan={{columns.length}}>
        <h5 class="pull-left">Current Games</h5>
      </td>
    </tr>
  {{/t.foot}}

{{/light-table}}

  {{!-- Error Messages --}}
  {{#if errorMessage }}
    <div class="alert alert-danger error">
      <strong>Erorr: </strong> {{errorMessage}}
    </div>
  {{/if}}
  {{#if successMessage }}
    <div class="alert alert-success success">
      <strong>Success: </strong> {{successMessage}}
    </div>
  {{/if}}

Answer 1

可能为时已晚，但此答案可能对其他人有所帮助。另外，我不知道这是否是最佳做法，但这对我有用。

混音：

import Table from 'ember-light-table';

export default Ember.Mixin.create({
  // other Properties
  fetchRecords: function() {
    this.get('store')
      .query(this.get('modelName'), {queryObjcet})
      .then((records) => {
        this.get('model').pushObjects(records.toArray());
      })
      .finally(() => {
       this.set('isLoading', false);
      });
  },

  // Other actions
});

组件 1：

import Ember from 'ember';
import DynamicTable from 'mixins/table-dynamic';

export default Ember.Component.extend(DynamicTable,{
  modelName:'firstModel',

  columns: [...]

  //Other actions
});

组件 2：

import Ember from 'ember';
import DynamicTable from 'mixins/table-dynamic';

export default Ember.Component.extend(DynamicTable,{
  modelName:'secondModel',

  columns: [...]

  //Other actions
});

同样，我们可以根据需要将相同的 mixin 扩展到许多表。