如何对 Ember.js 中的对象进行排序?
How do I sort objects in Ember.js?
我尝试关注 this post 但收效甚微。
我有一个示例 Ember.js 应用程序,我正在尝试对 "blog posts" 进行排序,其中最新的 post 列在最前面。我哪里错了?
index.html
<script type="text/x-handlebars" data-template-name="posts">
...
<!-- relevant section -->
<section id="posts" class="col-md-12">
{{#each post in model}}
<div class="post row">
<h3 class="title">{{post.title}}</h3>
<div class="body">{{post.body}}</div>
</div>
{{/each}}
</section>
</script>
router.js
Blog.Router.map(function() {
this.resource('posts', {path: '/'});
});
Blog.PostsRoute = Ember.Route.extend({
model: function() {
return this.store.find('post');
}
});
posts_controller.js
Blog.PostsController = Ember.ArrayController.extend({
itemController: 'post',
sortProperties: ['id'],
sortAscending: false,
actions: {
createPost: function() {
var title = this.get('newTitle');
var body = this.get('newBody');
if(!title.trim() || !body.trim()) { return; }
var post = this.store.createRecord('post', {
title: title,
body: body
});
this.set('newTitle', '');
this.set('newBody', '');
post.save();
}
}
});
post.js
Blog.Post = DS.Model.extend({
title: DS.attr('string'),
body: DS.attr('string')
});
Blog.Post.FIXTURES = [
{
id: 1,
title: 'Hell Is Other Robots',
body: 'You know the worst thing about being a slave? They make you work, but they don\'t pay you or let you go. Kif, I have mated with a woman. Inform the men. Now, now. Perfectly symmetrical violence never solved anything.'
},
{
id: 2,
title: 'The Luck of the Fryrish',
body: 'Tell them I hate them. There\'s no part of that sentence I didn\'t like! Fetal stemcells, aren\'t those controversial? Daylight and everything. That\'s not soon enough! You\'re going to do his laundry? Oh right. I forgot about the battle. Hey, whatcha watching?'
},
{
id: 3,
title: 'The Duh-Vinci Code',
body: 'I\'ve been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Actually, that\'s still true. You seem malnourished. Are you suffering from intestinal parasites? And remember, don\'t do anything that affects anything, unless it turns out you were supposed to, in which case, for the love of God, don\'t not do it! Oh, I always feared he might run off like this. Why, why, why didn\'t I break his legs?'
}
];
您只需要绑定到 arrangedContent
属性 而不是直接绑定模型。
{{#each post in arrangedContent}}
<div class="post row">
<h3 class="title">{{post.title}}</h3>
<div class="body">{{post.body}}</div>
</div>
{{/each}}
请参阅 arrangedContent
here. Dom Cristie has written a nice overview here 的文档。
我尝试关注 this post 但收效甚微。
我有一个示例 Ember.js 应用程序,我正在尝试对 "blog posts" 进行排序,其中最新的 post 列在最前面。我哪里错了?
index.html
<script type="text/x-handlebars" data-template-name="posts">
...
<!-- relevant section -->
<section id="posts" class="col-md-12">
{{#each post in model}}
<div class="post row">
<h3 class="title">{{post.title}}</h3>
<div class="body">{{post.body}}</div>
</div>
{{/each}}
</section>
</script>
router.js
Blog.Router.map(function() {
this.resource('posts', {path: '/'});
});
Blog.PostsRoute = Ember.Route.extend({
model: function() {
return this.store.find('post');
}
});
posts_controller.js
Blog.PostsController = Ember.ArrayController.extend({
itemController: 'post',
sortProperties: ['id'],
sortAscending: false,
actions: {
createPost: function() {
var title = this.get('newTitle');
var body = this.get('newBody');
if(!title.trim() || !body.trim()) { return; }
var post = this.store.createRecord('post', {
title: title,
body: body
});
this.set('newTitle', '');
this.set('newBody', '');
post.save();
}
}
});
post.js
Blog.Post = DS.Model.extend({
title: DS.attr('string'),
body: DS.attr('string')
});
Blog.Post.FIXTURES = [
{
id: 1,
title: 'Hell Is Other Robots',
body: 'You know the worst thing about being a slave? They make you work, but they don\'t pay you or let you go. Kif, I have mated with a woman. Inform the men. Now, now. Perfectly symmetrical violence never solved anything.'
},
{
id: 2,
title: 'The Luck of the Fryrish',
body: 'Tell them I hate them. There\'s no part of that sentence I didn\'t like! Fetal stemcells, aren\'t those controversial? Daylight and everything. That\'s not soon enough! You\'re going to do his laundry? Oh right. I forgot about the battle. Hey, whatcha watching?'
},
{
id: 3,
title: 'The Duh-Vinci Code',
body: 'I\'ve been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Actually, that\'s still true. You seem malnourished. Are you suffering from intestinal parasites? And remember, don\'t do anything that affects anything, unless it turns out you were supposed to, in which case, for the love of God, don\'t not do it! Oh, I always feared he might run off like this. Why, why, why didn\'t I break his legs?'
}
];
您只需要绑定到 arrangedContent
属性 而不是直接绑定模型。
{{#each post in arrangedContent}}
<div class="post row">
<h3 class="title">{{post.title}}</h3>
<div class="body">{{post.body}}</div>
</div>
{{/each}}
请参阅 arrangedContent
here. Dom Cristie has written a nice overview here 的文档。