从Ember Data支持的ArrayController添加/删除项目 [英] add/delete items from Ember Data backed ArrayController

问题描述

我在应用程序中使用了一个ArrayController，它通过应用程序的路由器从Ember Data REST调用进行传送：

  postsController.connectOutlet（'comment'，App.Comment.find（{post_id：post_id}））; 
  

对于Post UI，我可以添加/删除评论。当我这样做时，我希望能够通过删除或添加相同的元素来更新postsController的contentArray来给用户提供可视化反馈，但Ember Data不是有趣的：

 未捕获错误：服务器查询（在App.Comment上）的结果是不可变的。 
  

根据sly7_7的评论，我刚刚注意到结果确实是DS.RecordArray当没有查询（App.Comment.find（）），但是在有一个查询（App.Comment.find（{post_id：post_id}））的情况下，返回一个DS.AdapterPopulatedRecordArray。

我需要.observes（'contentArray'）并创建一个可变的副本吗？还是有更好的方法？

解决方案

这是我最终实现解决的问题，根据问题的提出，我唯一的解决方案是创建一个可以通过添加和删除维护的内容的可变副本：

  contentChanged：function（）{
 var mutableComments = []; 
 
 this.get（'内容'）forEach（function（comment）{
 mutableComments.pushObject（comment）; 
}）; 
 
 this.set（'currentComments'，mutableComments）; 
} .observes（'content'，'content.isLo aded'），
 
 addComment：function（comment）{
 var i; 
 var currentComments = this.get（'currentComments'）; （i = 0; i< this.get（'currentComments.length'）; i ++）{
 if（currentComments [i] .get（'date'）< comment.get 'date'））{
 this.get（'currentComments'）。insertAt（i，comment）; 
 return; 
} 
} 
 
 //通过 - >添加到最后。 
 this.get（'currentComments'）。pushObject（comment）; 
}，
 
 removeComment：function（comment）{
 this.get（'currentComments'）。forEach（function（item，i，currentComments）{
 if （item.get（'id'）== comment.get（'id'））{
 currentComments.removeAt（i，1）; 
} 
}）; 
} 
  

然后在模板中绑定到此计算属性：

  {{＃currentComments中的每个评论}} 
 ... 
 {{/ each}} 
  

我对此解决方案不满意 - 如果有更好的方法，我很乐意听到关于它。

I'm using an ArrayController in my application that is fed from a Ember Data REST call via the application's Router:

postsController.connectOutlet('comment', App.Comment.find({post_id: post_id}));

For the Post UI, I have the ability to add/remove Comments. When I do this, I'd like to be able to update the contentArray of the postsController by deleting or adding the same element to give the user visual feedback, but Ember Data is no fun:

Uncaught Error: The result of a server query (on App.Comment) is immutable.

Per sly7_7's comment below, I just noticed that the result is indeed DS.RecordArray when there is no query (App.Comment.find()), but in the case where there is a query (App.Comment.find({post_id: post_id}), a DS.AdapterPopulatedRecordArray is returned.

Do I have to .observes('contentArray') and create a mutable copy? Or is there a better way of doing this?

解决方案

Here is what I ended up implementing to solve this. As proposed in the question, the only solution I know about is to create a mutable copy of the content that I maintain through add and deletes:

contentChanged: function() {
    var mutableComments = [];

    this.get('content').forEach(function(comment) {
        mutableComments.pushObject(comment);
    });

    this.set('currentComments', mutableComments);
}.observes('content', 'content.isLoaded'),

addComment: function(comment) {
    var i;
    var currentComments = this.get('currentComments');
    for (i = 0; i < this.get('currentComments.length'); i++) {
        if (currentComments[i].get('date') < comment.get('date')) {
            this.get('currentComments').insertAt(i, comment);
            return;
        }
    }

    // fell through --> add it to the end.
    this.get('currentComments').pushObject(comment);
},

removeComment: function(comment) {
    this.get('currentComments').forEach(function(item, i, currentComments) {
        if (item.get('id') == comment.get('id')) {
            currentComments.removeAt(i, 1);
        }
    });
}

Then in the template, bind to the this computed property:

{{#each comment in currentComments}}
    ...
{{/each}}

I'm not satisfied with this solution - if there is a better way to do it, I'd love to hear about it.

这篇关于从Ember Data支持的ArrayController添加/删除项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！