.query() is not updating the UI

[LowBP]

its my view layer post/template.hbs

 <button {{action 'addNewPost'}}> + Add New Post </button>
  <ul>
      {{#each model as |item|}}
          <li>{{item.name}}</li>
      {{/each}}  
   </ul>

my action area:-

   addNewPost() {
     let post = this.get('store').createRecord(post, {
      name: 'ABC..
     });
      post.save();
   }

route

  model(params){
   return this.store.query(modelName,{filter,{
      filter: {
        name: "abc", 
      }
    })
}

Works:- (e.g. what happens with .findAll()) When clicking the Add New post button in the UI, triggering the addNewPost() action, the new item is automatically rendered in the {{#each}} block into the page.

Does Not Work:- (e.g. what happens with .query()): When clicking the button and triggering addNewPost(), the UI never updates. New document is created suucessfuly in couchdb , but the {{#each}} block is never re-rendered. data updation and deletion is working *.

[jlami]

You are correct, but I think that this is by design. .query does not return live recordsets. peekAll and findAll do. This is ember-data, not really our addon.

To work around this you can use peekAll after the query:

model(params){
   return this.store.query(modelName,{
      filter: {
        name: "abc", 
      }
    }).then(() => this.store.peekAll(modelName));
}

But when doing this you will have to also filter the resulting model in JS. Because peekAll will return all items. It might be prefilled by the query, but because it is live, you will also get items that don't match the filter. So you will need a Ember.computed.filterBy(...)

You might take a look at this issue: https://github.com/emberjs/ember.js/issues/15256

[LowBP]

thank you so much .