Does the output of the {{each}} can be sorted?


#1

Could data be sorted by each helper?


#2

Yes take a look at this exampe https://www.emberjs.com/api/ember/2.15/namespaces/Ember.computed/methods/sort?anchor=sort


#3

You can also take a look at the bloggr example:


#4

thanks for your answer.

I’m not sure if i express my thought clearly, i means if can sorted the data via {{each}}.

the guide of Ember too brief


#5

another problem, i created a component that use its block form, and a {{each}} wrapped in its block . But as I debug, the {{each}} never run.

{{#item-list data=individual.documents.data as |files|}}
  {{#each files as |file index|}}
    {{attachfile-organization-edit categories=fileCategories statuses=fileStatuses item=file index=index individual=individual}}
  {{/each}}
{{/item-list}}

[Note]: variable “files” is an array and has data in it.

Does anybody could supply an answer?


#6

You can take a look at the https://github.com/broerse/ember-cli-blog/ example. Especially the each loop where you can also write arrangedContent where you see pagedContent to get just the sorted array above:


#7

If you mean, is there a {{each someUnsortedList as |item| sortBy someField}} Then no, not that I am aware of.

This is normally done in the controller/component.js code. The typical approach is to create a computed named “sortedList” or similar, and reference that in the each. Doing so allows the change notification engine to kick in, all the way down to the field you want to sort by.


#8

oh yes! forgive my unclear discription, this is what i want! thank you very much

发自我的iPhone

------------------ Original ------------------


#9

also thanks broerse!!


#10

Hi @GregWang:

Could data be sorted by each helper?

A few addons—like ember-composable-helpers—provide a (sort-by) helper, which could be used like so:

{{#each (sort-by 'name' files) as |file index|}}
  {{file.name}}
{{/each}}

However, this assumes that you have an array of objects, not just an array of values. If you have an array of values, you can write your own sort function as an action and pass it as the first argument to (sort-by):

actions: {
  mySort: (a, b) => a.localeCompare(b)
}

Or you can cheat and just use Ember.compare:

actions: {
  mySort: Ember.compare
}

And use it like so:

{{#each (sort-by (action 'mySort') files) as |file index|}}
  {{file}}
{{/each}}

I don’t know why ember-composable-helpers doesn’t provide a (sort) helper; it seems like that would be a helpful addition. I suspect it uses Ember.computed.sort behind the scenes (and I just checked: it does) and that’s just how Ember.computed.sort works.

another problem, i created a component that use its block form, and a {{each}} wrapped in its block . But as I debug, the {{each}} never run.

Make sure your component’s template has a {{yield}} in it, otherwise the component block will never execute.


#11

Good suggestion, and i also found the defect that the component not support the array of values.