余烬推记录

Question

我在灰烬应用这条路线：

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 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); 

我需要的是能够添加新的本地评论（不坚持在服务器上）dinamically，使模板更新，以显示新添加的记录不完整的页面刷新

Answer 1

发表的评论列表的修改副本，并保持它的控制器上：

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|}} 

Answer 2

它应该简单地这样的工作：

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 
} 

这只适用于如果你真的有意见。如果不是，您首先需要将您的评论初始化为空数组。否则：

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 
    } 
}