Question

我开始研究一个新的余烬项目。我以前从未使用过ember。

我正在使用不符合JSON API规范的api，并且没有websocket。

所以我轮询api以获取最新数据。

我可以获取最新数据，但它会在底部而不是顶部的视图中呈现。我查看过1，2，3无济于事。

如何在列表顶部显示新数据？

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

//desired output
3
2
1

这是一个新项目，所以我不想使用任何将在2.0（控制器等）中折旧的东西。如果有效，我愿意改变模型。

我的路线如下：

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

我的模特是：

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

所以我的序列化器是：

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

Answer 1

看起来像这样的模板可以正常工作：

{{#each model.query as |query|}}
  {{#each query.jobsSorted as |job|}}
    {{job.took}}
  {{/each}}
{{/each}}

您的模板是什么样的？虽然要按降序对其进行排序，但您需要将:desc添加到排序顺序：

export default DS.Model.extend({
  jobs: DS.hasMany('job'),
  count: DS.attr('number'),
  jobQ: ['took:desc'],
  jobsSorted: Ember.computed.sort('jobs', 'jobQ')
});

这是一个JSFiddle，证明Ember.computed.sort的工作方式就像您尝试使用它一样：http://emberjs.jsbin.com/towerukafa/3/edit?html,css,js,output

Ember排序新添加的数据

1 个答案: