How is Sorting achieved in an Ember model without using Array Controller?

问题

Every google result is about an ArrayController sorting. Need a sorting mechanism without using ArrayController.

There is a model where there are sort params. Like say 'sortOrder' as one of the properties in the model (which will be from a back end).

Will be rendering this model using #each but this should do the iteration based on the sortOrder property and not the model's ID property.

回答1:

In Ember 2.0 SortableMixin is deprecated and is on its way out too.

In the Controller (not the ArrayController) you may define a new computed property like SortedUsers1,2,3 below:

export default Ember.Controller.extend({
    sortProps: ['lastName'],
    sortedUsers1: Ember.computed.sort('model', 'sortProps'),
    sortedUsers2: Ember.computed.sort('content', 'sortProps'),
    sortedUsers3: Ember.computed('content', function(){
        return this.get('content').sortBy('lastName');
    })
});

The assumption above is that the model itself is an array of users with lastName as one of user properties. Dependency on 'model' and 'content' look equivalent to me. All three computed properties above produce the same sorted list.

Note that you cannot replace 'sortProps' argument with 'lastName' in sortedUsers1,2 - it won't work.

To change sorting order modify sortProps to

sortProps: ['lastName:desc']

Also if your template is in users/index folder then your controller must be there as well. The controller in users/ would not do, even if the route loading model is in users/.

In the template the usage is as expected:

    <ul>
        {{#each sortedUsers1 as |user|}}
            <li>{{user.lastName}}</li>
        {{/each}}
    </ul>

回答2:

Here is how I manually sort (using ember compare)

import Ember from "ember";
import { attr, Model } from "ember-cli-simple-store/model";

var compare = Ember.compare, get = Ember.get;

var Foo = Model.extend({
    orderedThings: function() {
        var things = this.get("things");
        return things.toArray().sort(function(a, b) {
            return compare(get(a, "something"), get(b, "something"));
        });
    }.property("things.@each.something")
});

回答3:

You just need to include a SortableMixin to either controller or component and then specify the sortAscending and sortProperties property.

Em.Controller.extend(Em.SortableMixin, {
  sortAscending: true,
  sortProperties: ['val']
});

Here is a working demo.

回答4:

In situations like that, I use Ember.ArrayProxy with a Ember.SortableMixin directly.

An ArrayProxy wraps any other object that implements Ember.Array and/or Ember.MutableArray, forwarding all requests. This makes it very useful for a number of binding use cases or other cases where being able to swap out the underlying array is useful.

So for example, I may have a controller property as such:

sortedItems: function(){
        var items = Ember.ArrayProxy.extend(Ember.SortableMixin).create({content: this.get('someCollection')});
        items.set('sortProperties', ['propNameToSortOn']);
        return items;
}.property()

Like so: JSBin

来源：https://stackoverflow.com/questions/30387375/how-is-sorting-achieved-in-an-ember-model-without-using-array-controller

标签

ember.js

ember-data

ember-cli