模型中的 Ember 推送记录和更新模板

Question

我的 Ember 应用中有这条路线：

model: function(params, transition) {
    var self = this;

    return Ember.RSVP.hash({
        photo: self.store.find('photo', params.id),
        comments: self.store.query('comment', {id: params.id})
    });
},

actions: {
    newComment: function(comment) {
        var record = this.store.createRecord('comment', comment);

    }
}

模板：

{{#each model.comments as |comment|}}
    <div class="card">
        <div data-userId="{{comment.userId}}">
            <b>{{comment.username}}</b>
        </div>
        <div>
            {{comment.content}}
        </div>
        <span class="hide-on-small-only">{{i18n 'createdAt_lbl'}}: </span>{{format comment.createdAt type='date'}}
    </div>
{{/each}}

{{post-comment newComment='newComment' comments=model.comments}}

和评论模型：

export default DS.Model.extend({
    commentHash: DS.attr('string'),
    content: DS.attr('string'),
    createdAt: DS.attr('date'),
    username: DS.attr('string'),
    userHash: DS.attr('string'),
    userId: DS.attr('number'),
});

post-comment 组件负责调用 newComment 操作：

// post-comment component
var self = this;

// get the new comment content from textarea
var $contentArea = this.$('#postCommentContent');
var content = $contentArea.val();

var newComment = {
    userId: localStorage.getItem('userId'),
    content: content,
    createdAt: moment().format('MMMM Do YYYY, h:mm:ss a')
};
self.sendAction('newComment', newComment);

我需要的是能够动态地添加新的本地评论（无需将其保留在服务器上）并更新模板以显示新添加的记录而无需完整的页面刷新

Answer 1

它应该像这样工作：

newComment: function(comment) {
    var record = this.store.createRecord('comment', comment);
    var commentsModel =  this.get('model.comments'); // or this.get('comments'), depending where you action resides
    commentsModel.pushObject(record);
    this.set('model.comments', commentsModel); // or this.set('comments'), depending where you action resides 
}

这仅在您确实有 cmets 时才有效。如果没有，您首先需要将您的 cmets 初始化为一个空数组。否则：

newComment: function(comment) {
    var record = this.store.createRecord('comment', comment);
    var commentsModel =  this.get('model.comments'); // or this.get('comments'), depending where you action resides
    if(!commentsModel){
        commentsModel = Ember.A();
    }
    commentsModel.pushObject(record);
    this.set('model.comments', commentsModel); // or this.set('comments'), depending where you action resides 
    }
}

Answer 2

制作 cmet 列表的可修改副本并将其保存在控制器上：

setupController(controller, model) {
  this._super(...arguments);
  controller.set('comments', model.comments.toArray());
}

您需要复制的原因是来自store.query 的返回值由于各种原因无法写入。可能还有其他方法可以制作副本，但 toArray 似乎效果很好。

创建后将新评论添加到此列表中：

actions: {
  newComment: function(comment) {
    var record = this.store.createRecord('comment', comment);
    this.get('comments').pushObject(record);
  }
}

在您的模板中，遍历控制器属性：

{#each comments as |comment|}}