lundi 29 août 2016

Access to Ember component data from within component template

I'm trying to figure out Ember.js so that I'm not manually manipulating the DOM, and using handlebars instead.

I'm trying to get access to the component's data within the component's template so that I can iterate over the data and build a table. If this isn' the Ember way, please let me know. I don't have the data set in a model, store, or in the route. Everything is done in the component "issue-data".

Here is the component and its template:

import Ember from 'ember';

export
default Ember.Component.extend({
  runAll: null,
  csvData: null,
  initTable: function() {
    function buildTable() {
      var csvFile;
      Ember.$.ajax({
        url: 'open_issues_data/open_issues_data.csv',
        dataType: 'text',
        async: false,
        success: function(response) {
          csvFile = response;
        },
        error: function(err) {
          console.log(err);
        }
      });

      Papa.parse(csvFile, {
        complete: function(results) {
          csvFile = results.data;
          this.csvData = csvFile;
        }
      });

      /* Uncomment when ready to implement filter
        options = {
          valueNames: ["issue_number", "customer_id", "date_reported", "location"]
        };

        var myList = new List("table-div", options);
      */
    }
    buildTable();
  }.on('didInsertElement'),

  didInsertElement() {
    this.runAll = Ember.run.later(this, function() {
      this.initTable();
      this.runAll = Ember.run.later(this, this.runAll, 60000);
    }, 60000);
  },

  didDestroyElement() {
    Ember.run.cancel(this.runAll);
  }
});
<div id="table-div">
  <input class="search" placeholder="Filter by your input">
  <button class="sort" data-sort="issue_number">Sort by Issue #</button>
  <table id='data-table' class='table table-striped table-bordered'>
    <tbody id='table-body' class="list">
      
      <tr>
        
        <td></td>
        
      </tr>
      
    </tbody>
  </table>
</div>


Here is the template for the route:

<h2>Open Issues Data</h2>






Aucun commentaire:

Enregistrer un commentaire