Ember 数据:在数组的开头而不是末尾插入新项目 [英] Ember data: Insert new item at beginning of array instead of at the end

问题描述

在我的应用程序中，我正在显示消息的时间线.我们按从新到旧的降序从服务器检索它们.

In my application I'm displaying a timeline of messages. We retrieve them from the server in descending chronological order, newest to oldest.

3 - Howdy
2 - Greetings
1 - Mahalo

我们的用户还可以添加一条新消息，默认情况下它会像这样插入到队列的末尾

Our users also have the ability to add a new message which by default gets inserted at the end of the queue like so

3 - Howdy
2 - Greetings
1 - Mahalo
4 - I'm the new message, last as usual

当我提交时，我希望新消息显示在顶部.我之前写过一个函数来反转项目数组，但这不适用于数组中已有的项目.

When I submit, I'd like new messages to show up at the top. I've written a function before that reverses the array of items, but that wouldn't work for items already in the array.

4 - I'm the new message, first finally
3 - Howdy
2 - Greetings
1 - Mahalo

在这种情况下最好的方法是什么?理想的情况是 Ember Data 预先添加到内容数组而不是附加.还有其他更好的选择吗?

What would be the best approach in this case? The ideal would be for Ember Data to prepend to the content array rather than append. Is there another option which might be better?

推荐答案

对于大多数涉及排序的场景，推荐使用 Ember.SortableMixin，它被烘焙到 Ember.ArrayController.

For most scenarios involving sorting it's recommented to use Ember.SortableMixin, which is baked into Ember.ArrayController.

请参考 JSFiddle 中的这个概念示例:http://jsfiddle.net/schawaska/tbbAe/

Please refer to this conceptual example in JSFiddle: http://jsfiddle.net/schawaska/tbbAe/

在此示例中，模型有一个名为 when 的 DateTime 字段，我将其用于过滤:

In this sample the model has a DateTime field named when, which I'm using for filtering:

App.Greeting = DS.Model.extend({
    text: DS.attr('string'),
    when: DS.attr('date')                  
});

App.Greeting.FIXTURES = [
    {id: 1, text: 'First', when: '3/4/2013 2:44:52 PM'},
    {id: 2, text: 'Second', when: '3/4/2013 2:44:52 PM'},
    {id: 3, text: 'Third', when: '3/4/2013 2:44:52 PM'},
    {id: 4, text: 'Fourth', when: '3/4/2013 3:44:52 PM'}
];

在控制器中，我唯一要做的就是设置属性的名称和排序方向:

In the controller the only thing I have to do is to set the name of the property and the sorting direction:

App.SortingMixinController = Em.ArrayController.extend({
    sortProperties: ['when'],
    sortAscending: false
});

然后在我的 Handlebars 模板中，我可以像往常一样使用 {{each}} 助手.

Then in my Handlebars template, I can use the {{each}} helper as I would do normally.

因为在这个示例中，除了 Forth(因为排序出现在最前面)之外，所有日期都是相同的，也因为 SortableMixin，这些值将通过另一个属性进行排序 - 我在这里假设 Id.

Because in this sample, all the dates are the same except for the Forth (which because of sorting appears first), and also because of SortableMixin, these values will be sorted through another property - I'm assuming the Id here.

我在那个小提琴中采用的另一种方法是使用计算属性.我不太确定这种方法，因为它似乎消耗了更多的资源，而且 App.SortingPropertyController 中的代码值得一笑，但有点显示可能性.

The other approach I've taken in that fiddle is using a computed property. I'm not really sure about that approach as it seems to consume more resources and the code in App.SortingPropertyController is worthy of laugh, but sort of works to show possibilities.

这篇关于Ember 数据:在数组的开头而不是末尾插入新项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！