techinplanet staffAsked By: Anonymous
I have a list within a {{#each}} {{/each}}.
How would I sort this list in an ember component?
components/conversations-list.hbs
{{#each model as |conversation|}}
{{conversations-item userName=conversation.contact.userName lastConversationTime=conversation.lastConversationTime profilePictureUrl=conversation.contact.profilePictureUrl id=conversation.id}}
{{/each}}
How would I sort this list by lastConversationTime?
Solution
Answered By: Anonymous
Found the Answer:
fooSorting: ['id:desc']
Ember.computed.sort('model' , fooSorting)
_x000D_
_x000D_
App = Ember.Application.create();_x000D_
_x000D_
App.Router.map(function() {_x000D_
// put your routes here_x000D_
});_x000D_
_x000D_
App.Colors = [{_x000D_
id: 1,_x000D_
color: 'red'_x000D_
}, {_x000D_
id: 2,_x000D_
color: 'yellow'_x000D_
}, {_x000D_
id: 3,_x000D_
color: 'blue'_x000D_
}];_x000D_
_x000D_
App.IndexRoute = Ember.Route.extend({_x000D_
model: function() {_x000D_
return App.Colors;_x000D_
}_x000D_
});_x000D_
_x000D_
App.IndexController = Ember.Controller.extend({_x000D_
sorting: ['id:desc'],_x000D_
sortedContent: Em.computed.sort('model', 'sorting')_x000D_
});_x000D_
<!DOCTYPE html>_x000D_
<html>_x000D_
_x000D_
<head>_x000D_
<meta charset="utf-8">_x000D_
<title>Ember Starter Kit</title>_x000D_
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">_x000D_
<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js</a>_x000D_
<a href="http://builds.emberjs.com/tags/v1.12.0/ember-template-compiler.js">http://builds.emberjs.com/tags/v1.12.0/ember-template-compiler.js</a>_x000D_
<a href="http://builds.emberjs.com/tags/v1.12.0/ember.debug.js">http://builds.emberjs.com/tags/v1.12.0/ember.debug.js</a>_x000D_
_x000D_
<head>_x000D_
<meta charset="utf-8">_x000D_
<title>Ember Starter Kit</title>_x000D_
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
_x000D_
<script type="text/x-handlebars">_x000D_
<h2>Welcome to Ember.js</h2>_x000D_
{{outlet}}_x000D_
</script>_x000D_
_x000D_
<script type="text/x-handlebars" data-template-name="index">_x000D_
<ul>_x000D_
{{#each sortedContent as |item|}}_x000D_
<li>id: {{item.id}}: {{item.color}}</li>_x000D_
{{/each}}_x000D_
</ul>_x000D_
</script>_x000D_
_x000D_
_x000D_
</body>_x000D_
_x000D_
</html>_x000D_
_x000D_
x000D
http://emberjs.com/api/classes/Ember.computed.html#method_sort
