Как обновить данные Ember после создания с помощью JSONAPI?

Question

Я не уверен, что мне здесь не хватает, но после отправки save() запроса API я обнаружил, что список в шаблоне не обновляется.

Я использую адаптер JSONAPI, и после того, как создание было завершено, он возвращает соответствующий ответ на полезную нагрузку после создания, содержащий всю новую информацию, которую я вижу, фактически обновляет модель note в инспекторе Ember правильно с информацией из полезной нагрузки.

Я также попытался добавить в строках, как:

get(this, 'notes').pushObject(note); 

и в качестве альтернативы:

get(this, 'notes').addObject(note._internalModel); 

, который я нашел из SO и Поста форумах, но они оба возвращают предупреждение:

The result of a server query (on testapp@model:note:) is immutable.

Из того, что я читал, я думал, что адаптация JSONAPI r должен обрабатывать это (что похоже, что это изнутри Ember Inspector), но я просто не вижу никаких изменений, отраженных в шаблоне.

У меня есть следующие:

route.js

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model(params) { 

     return Ember.RSVP.hash({ 
      contact: this.store.findRecord('contact', params.contact_id), 
      notes:  this.store.query('note', {filter: {contact_id: params.contact_id}}), 
      note:  this.store.createRecord('note'), 
     }); 
    }, 

    setupController(controller, model) { 
     controller.set('contact', model.contact); 
     controller.set('notes', model.notes); 
     controller.set('note', model.note); 

    } 
}); 

controller.js

import Ember from 'ember'; 

const {Controller, set, get} = Ember; 

export default Controller.extend({ 

    actions: { 
    // Note CRUD.. 
    store() { 
     let note = get(this, 'note'); 
     set(note, 'contact', get(this, 'contact')); 
     note.save(); 
     this.send('reset'); 
    }, 
    reset() { 
     set(this, 'note', this.store.createRecord('note')); 
    } 

    }, 

}); 

template.hbs

{{#em-form model=note action="store"}} 
    {{em-text rows="3" property="content" label="Note" placeholder="Enter a note..."}} 
    <button type="button" class="btn btn-default" {{action "reset"}}>Reset</button> 
{{/em-form}} 

<ul> 
    {{#each notes as |note|}} 
    <li>{{note.content}}</li> 
    {{/each}} 
</ul> 

Кроме того, не уверен, что это актуально, но в Ember Inspector, даже если модель заполнена новым идентификатором и временными метками и т. Д. С сервера, я заметил эту разницу между новым элементом и существующими?

Новое: <testapp@model:note::ember1376:null> (обратите внимание на нуль)

Существующее: <testapp@model:note::ember876:48> ..etc

Answer 1

Проблема в том, что вы одновременно отправляете как запрос на отправку, так и запрос. Массив заметок на вашем хэш-модели будет захватывать записи заметок во время запроса, в который не будет включена ваша вновь созданная заметка.

Кроме того, массив примечаний не будет обновляться, чтобы включить новую заметку после ее создания.Если вы хотите, чтобы это произошло, функциональность вы ищете находится в пределах функции фильтра Ember Дейты http://emberjs.com/api/data/classes/DS.Store.html#method_filter

return Ember.RSVP.hash({ 
     contact: this.store.findRecord('contact', params.contact_id), 
     notes:  this.store.filter('note', {contact_id: params.contact_id}, function(note) { 

         var belongsToContact = note.get('contact_id', params.contact_id); 
         var hasAnId = !note.get('isNew'); 

         return isNotNew && belongsToContact; 
        }), 
     note:  this.store.createRecord('note'), 
    }); 

Функция фильтрации сделает как запрос запроса для свежих данных и проконсультирует локальное хранилище уголька данных для записи, которые он уже загрузил. Из-за этого вы должны предоставить функцию фильтра на стороне клиента для фильтрации ваших локальных записей.

Answer 2

Я думаю переименовать заметки в notesQuery (в маршруте, листья как ноты в шаблоне), а затем иметь вычисленное, что часы notesQuery и что-то на ноте, как note.isNew, так что, возможно:

notes: Ember.computed('notesQuery', 'note.isNew', function() { 
    let result = []; 
    result.pushObjects(this.get('notesQuery')); 
    if (!this.get('note.isNew')) { 
    result.addObject(this.get('note')); 
    } 
    return result; 
}) 

Я не уверен на isNew, вы можете использовать один из ваших собственных свойств, или что-то другое, перечисленные в http://emberjs.com/api/data/classes/DS.Model.html.

Answer 3

Принимается ответ привел меня к решению:

Этот ответ привел меня к решению, хотя метод this.store.filter() амортизируется, я был в состоянии повторить его:

route.js

model(params) { 

    return RSVP.hash({ 
     contact: this.store.findRecord('contact', params.contact_id), 
     notes:  this.store.query('note', {filter: {contact_id: params.contact_id}}), 

    }); 
}, 
setupController(controller, model) { 

    controller.set('contact', model.contact); 
    controller.set('note', this.store.createRecord('note')); 

}, 

controller.js

allNotes: computed(function(){ 
    return this.store.peekAll('note'); 
}), 

notes: function() { 
    return get(this, 'allNotes').filterBy('isNew', false); 
}.property('allNotes.@each.isNew'), 

поэтому, когда новый элемент создан, он больше не является «isNew». Я не уверен, что это безопасно (т. Е. Если какая-то заметка каким-то образом попадет в магазин с отношением к другому контакту, то функция peekAll() подберет ее, но я полагаю, что это будет сделано сейчас. Спасибо.