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

Posted 2023-02-23

【中文标题】Emberjs 高级排序 hasMany 关联作为计算属性

【英文标题】：Emberjs advanced sort hasMany association as a computed property

【发布时间】：2015-09-04 17:57:26

【问题描述】：

我已经问过这个问题的一个变体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('[e-mail]')

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

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

所以既然this.get('files') 返回了一个承诺，我想我会试试这个；

  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('[e-mail]')

然后我收到以下错误：

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 排序并返回所需的排序对象。

【参考方案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('[e-mail]')

);

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>

【讨论】：

感谢您的提示。我经历了这么多 ember jsbin，我一定忘记了 Ember-Data。我更新了我的 jsbin。但它并没有真正改变任何东西。 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('[e-mail]') 是我的问题所在。我相信我使用的 emberjs 版本有 sortBy 接受多个参数。但即使我不使用 sortBy，当我使用常规排序功能时，我也不会得到有序的文件。什么都没有显示。

我将把它标记为答案，因为如果我需要更多的排序能力而不是使用 sortBy，你确实指示我进行排序“我自己”。但是，我对问题的最后一次更新允许我使用默认的 javascript 排序，因此可以“自己”进行。如果您不介意，请评论我如何让您复制并粘贴的代码在 jsbin 上工作。或者，请查看我的另一个问题***.com/questions/30926167/…，让我知道如何让固定装置在 jsbin 上运行。再次感谢。

很抱歉回复晚了，这是我的 jsbin emberjs.jsbin.com/banozisuqa/1/edit?html,js,console,output