sorting - Emberjs 高级排序 hasMany 关联作为计算属性

Question

我问了这个问题的一个变体 here 。但基本上我需要创建一个在 hasMany 关联上运行的计算属性。我需要进行类似于 javascript sort 的排序功能;我可以在哪里做类似的事情

files = ["File 5", "File 1", "File 3", "File 2"];
files.sort(function(a,b){
  return parseInt(b.split(' ').pop()) - parseInt(a.split(' ').pop())
});

结果:

["File 5", "File 3", "File 2", "File 1"]

这是我的 jsbin: http://emberjs.jsbin.com/simayexose/edit?html,js,output

任何帮助将不胜感激。

注意: 我的 jsbin 目前无法正常工作(由于这个问题以外的原因)。我已经发布了一个关于此的问题here 。我只是不想保留这个问题的答案。

更新 1

谢谢@engma。我执行了指示。事实上，我复制并粘贴了发布的内容。这是新的 jsbin。 http://emberjs.jsbin.com/roqixemuyi/1/edit?html,js,output

不过，我仍然没有解决任何问题。即使确实如此，它仍然不会按照我想要的方式排序。

我需要类似以下内容:(以下是当我尝试在代码中实现此功能时出现的错误，而不是从 jsbin 实现，因为我无法让 jsbin 工作)

  sortedFiles: function(){
    return this.get('files').sort(function(a,b){
      return parseInt(b.split(' ').pop()) - parseInt(a.split(' ').pop());
    });
  }.property('<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="deb8b7b2bbadf09ebbbfbdb6f0b0bfb3bb" rel="noreferrer noopener nofollow">[email protected]</a>')

当我这样做时，我收到以下错误:

Uncaught TypeError: this.get(...).sort is not a function

因此，由于 this.get('files') 返回一个 promise ，我想我会尝试这个；

  sortedFiles: function(){
    return this.get('files').then(function(files){
      return files.sort(function(a,b){
        return parseInt(b.split(' ').pop()) - parseInt(a.split(' ').pop());
      });
    });
  }.property('<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76101f1a130558361317151e5818171b13" rel="noreferrer noopener nofollow">[email protected]</a>')

但是我收到以下错误:

Uncaught Error: Assertion Failed: The value that #each loops over must be an Array. You passed {_id: 243, _label: undefined, _state: undefined, _result: undefined, _subscribers: }

顺便说一句，我正在使用 emberjs v1.11.0

而且，我使用的 sortBy 是 ember-cli/node_modules/bower-config/node_modules/mout/array/sortBy.js

这是它的代码

var sort = require('./sort');
var makeIterator = require('../function/makeIterator_');

    /*
     * Sort array by the result of the callback
     */
    function sortBy(arr, callback, context){
        callback = makeIterator(callback, context);

        return sort(arr, function(a, b) {
            a = callback(a);
            b = callback(b);
            return (a < b) ? -1 : ((a > b) ? 1 : 0);
        });
    }

    module.exports = sortBy;

更新2

因此，要回答如何将 Emberjs 高级排序 hasMany 关联作为计算属性的问题；我必须改变

  this.get('files').sort(function(a,b){
      ...
  });

  return this.get('files').toArray().sort(function(a,b){
    ...
  });

这使我能够使用 JavaScript 排序并返回所需的排序对象。

Answer 1

好吧，首先你的 JSBin 有很多问题，所以让我们一一抛出它们

1-您没有包含任何 Ember-Data 构建，因此我包含了 1，这是灯具和模型所需的

<script src="http://builds.emberjs.com/tags/v1.0.0-beta.15/ember-data.js"></script>

2-您的脚本

var App = window.App = Ember.Application.create({
});
//First this is how to register the adapter
App.ApplicationAdapter = DS.FixtureAdapter.extend({});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    //Second with find you pass in the ID so I am using 1
    //if you want to get all folders use findAll()
    return this.store.find('folder',1);
  } 
});

App.IndexController = Ember.Controller.extend({

});


App.Router.map(function() {
});

App.Folder = DS.Model.extend({
  name: DS.attr('string'),
  files:  DS.hasMany('file',{async:true}),
  sortedFiles: function(){
    //Sorty By has no second parameter, if you need more sorting power, do it your self
    return this.get('files').sortBy('name');
  }.property('<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4026292c25336e00252123286e2e212d25" rel="noreferrer noopener nofollow">[email protected]</a>')

});

App.File = DS.Model.extend({
  name: DS.attr('string'),
  folder: DS.belongsTo('folder',{async:true})
});

App.File.FIXTURES = [
  {
    id: 1,
    name: 'File 5',
    folder:1
  },
  {
    id: 2,
    name: 'File 1',
    folder:1
  },
  {
    id: 3,
    name: 'File 3',
    folder:1
  },
  {
    id: 4,
    name: 'File 2',
    folder:2
  },
  {
    id: 5,
    name: 'File 6',
    folder:2
  },
  {
    id: 6,
    name: 'File 4',
    folder:2
  }
];


App.Folder.FIXTURES = [
  { 
    id: 1,
    name: 'Folder 1',
    files:[1,2,3]
  },
  {
    id: 2,
    name: 'Folder 2',
    files:[4,5,6]
  }
];

您的模板:

<div>
   Folders: <br>
  <ul>
   <li>
     Name: {{model.name}} <br>
     Files:
     {{!-- here we access the sorted files property in the model--}}
     {{#each file in model.sortedFiles}}
       {{file.name}} <br/>
     {{/each}}
  </li>
 </ul>
</div>