vendredi 24 juillet 2015

Ember sort newly added data

I started working on a new ember project. I have never used ember before.

I am working with an api that does not conform with the JSON API spec and does not have a websocket.

So I poll the api to get the latest data.

I can get the latest data but it is rendered in the view on the bottom instead of the top. I have looked at 1, 2, 3 to no avail.

How do I get the new data to render at the top of the list?

//sample output after a new job fetched
2
1
3

//desired output
3
2
1

This is a new project so I don't want to use anything that will be depreciated in 2.0 (controllers, etc.). I am open to changing the model(s) if that works.

My route looks like this:

//routes query.js
import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    var interval = 1000; // every second
    Ember.run.later(this, function() {
      this.model().then(function(json) {
        this.controller.set('model', json);
      }.bind(this));
    }, interval);

    return Ember.RSVP.hash({
        query: this.store.find('query'),
        job: this.store.peekAll('job')
      });
  },
});

My models are:

//models query.js
import DS from 'ember-data';
import Ember from 'ember';

export default DS.Model.extend({
  jobs: DS.hasMany('job'),
  count: DS.attr('number'),
  jobQ: ['took'],
  jobsSorted: Ember.computed.sort('jobs', 'jobQ'), <-- this doesn't seem to work
});

//models job.js
import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  submitter: DS.attr('string'),
  submission_time: DS.attr('date'), // '2015-04-27 15:14:55', // date?
  completion_time: DS.attr('date'), // '2015-04-27 15:15:08',
  took: DS.attr('number'),
  statuses: DS.attr('string'), // object
  query: DS.belongsTo('query'),
});

So my serializer is:

// serializers query.js
import DS from 'ember-data';
import assign from 'npm:object-assign';

export default DS.RESTSerializer.extend({
  isNewSerializerAPI: true,
  normalizeResponse: function (store, primaryModelClass, payload) {

    // delete things we don't want
    delete payload.error;
    delete payload.status;

    // populate array
    var jobs = [],
        relationships = [];

    // copies the jobs to a new var keep the payload clean
    Object.keys(payload.jobs).forEach((key) => {
      let attributes = {};
      assign(attributes, payload.jobs[key]);
      delete attributes.id;
      jobs.push({ id: key, type: 'job', attributes: attributes});
      relationships.push({ id: key, type: 'job'});
    });

    var c =  payload.count;

    //jobs
    // [{
    //  id:
    //  type:
    //  attributes: {
    //    name:
    //    filter:
    //    ...
    //  },
    //  ...
    // }]

    return {
      data: {
        id: 1,
        type: 'query',
        relationship: {
          job: {
            data: relationships
          }
        },
        attributes: { count: c }
      },
      included: jobs
    };
  }
});




Aucun commentaire:

Enregistrer un commentaire