Question

我是Ember.js和ember-light-table的新工作。我要做的是在我的表的一列中有一个三态切换开关。这是我正在谈论的切换开关类型的fiddle。此时我可以将拨动开关渲染到正确的列中，但是，只有第一个切换框可以工作。解决此类问题的最佳'余烬方法'是什么？我假设你构建了一个组件，所以我做了，查看表的组件和控制器，它在正确的列中调用组件。什么是从这些切换开关和控制器中获取数据的最佳方法，以便我可以更新我的数据库？

更新：我仍然在努力解决同样的问题，但我现在已经接近了。我可以得到＃id;＆＃39;当我点击一个按钮时的行。我需要做的是在商店查询正确的行＆＃39;从表中。我已经试过了这个。（＆＃39; store＆＃39;）。peekRecord（＆＃39; model＆＃39;，id）;其中id是我点击按钮得到的ID。

控制器

//app/controller/table.js
import Ember from 'ember';
import Table from 'ember-light-table';

const computed = Ember.computed;

export default Ember.Controller.extend({

  toggleIds: [],
  model: [],
  table: null,

  actions: {
    updateModel: function() {
      const store = this.get('store');

      const users = store.peekAll('user');
      console.log("user store: ", users);
    },

    onColumnClick(column) {
      console.log('onColumnClick', column );
    }
  },

  columns: computed(function() {
    return [{
      label: 'Home Team',
      valuePath: 'HomeTeam',
      align: 'center'
    }, {
      label: 'Away Team',
      valuePath: 'AwayTeam',
      align: 'center'
    }, {
      label: 'Score',
      valuePath: 'score',
      align: 'center'
    }, {
      label: 'Winner,
      valuePath: 'winner',
      align: 'center'
    }, {
      label: 'Select',
      align: 'center',
      sortable: false,
      cellComponent: 'toggle-switch' // <-- compnent called here!
    }];
  }),

  setupTable() {
    console.log("got here: ", this.get('model') );
    this.set('table', new Table(this.get('columns'), this.get('model')));
  }

});

组件 - 已更新

// app/templates/components/toggle-switch.hbs

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default" {{action tableActions.toggleAway row.id }}>
    <input type="radio" name="options" id="option1"> Away
  </label>
  <label class="btn btn-default active">
    <input type="radio" name="options" id="option2" checked> @
  </label>
  <label class="btn btn-default" {{action tableActions.toggleHome row.id }}>
    <input  type="radio" name="options" id="option3"> Home
  </label>
</div>

table.hbs

  {{#light-table table tableClassNames="table table-striped table-hover"
      tableActions=(hash
        toggleHome=(action 'toggleHome')
        toggleAway=(action 'toggleAway')
      ) as |t|}}

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

  {{#t.body as |body|}}

    {{#if isLoading}}
      {{#body.loader}}
        Loading...
      {{/body.loader}}
    {{/if}}

    {{#if table.isEmpty}}
      {{#body.no-data}}
        No data found.
      {{/body.no-data}}
    {{/if}}
  {{/t.body}}

  {{#t.foot }}
      <tr style="background-color: lightgray">
      <td class="align-center" colspan={{columns.length}}>
        <button {{action "savePicks"}} class="btn btn-success pull-right" style="padding:5px 20px">Save</button>
        <h5 class="pull-left">Current Games</h5>
      </td>
    </tr>
  {{/t.foot}}

{{/light-table}}

在余烬灯台中的三态拨动开关

0 个答案: