mardi 31 janvier 2017

3-state toggle switch in an ember-light-table

I’m new working with Ember.js and ember-light-table. What I’m looking to do is have a three state toggle switch in one of the columns of my table. Here is a fiddle of the type of toggle switch I’m talking about. At this point I can render the toggle switch in the correct column, however only the first toggle box works. What’s the best ‘ember approach’ to solving this type of issue? I assume you build a component so I did, look at the component and the controller for the table which calls the component in the correct column. What's the best approach to get data out of these toggle switches and into a controller so I can update my database?

Controller

//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')));
  }

});

Component

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

<div class="switch-toggle switch-3 switch-candy">

    
    <label onclick="">ON</label>

    
    <label onclick="">N/A</label>

    
    <label onclick="">OFF</label>

    <a></a>
</div>




Aucun commentaire:

Enregistrer un commentaire