餘燼推記錄

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