mharris717 / ember-cli-pagination

Pagination Addon for Ember CLI
MIT License
272 stars 116 forks source link

Creating data #237

Open MichalBryxi opened 6 years ago

MichalBryxi commented 6 years ago

I'm completely missing a hint that would describe how to handle the case when user adds new data into currently paginated data set. My case would be:

1) The page displays list of paginated records 2) User creates & saves new record 3) The record is immediately visible in the list of paginated records (assuming that it should be displayed given it's position in paginated data)

I think I found a nice solution which is unfortunately not documented anywhere:

// route.js
export default Route.extend(RouteMixin, {
  model() {
      return this.findPaged('post'),
  }
});
// controller.js
export default Controller.extend({
  actions: {
    createNewPost() {
      // Note that this by itself won't make the post appear in paginated list of posts
      let newPost = this.store.createRecord('post'); 

      // Not even saving the data server side will make it appear on user's screen
      return newPost.save().then(() => { 
        // This will force the ember-cli-pagination to re-fetch current page
        this.get('model').setOtherParam('nameOrValueOfThisPropertyDoesNotReallyMatter', true); 
      });
    }
  }
});
{{! template.hbs }}

<button {{action "createNewPost"}}>Click me to create new post</button>

<ul>
  {{#each model as |post|}}
    <li>{{post.id}}</li>
  {{/each}} 
</ul>

Not: I'm writing that from the top of my head. Might not 100% compile.

Hope this might help somebody. Also if this snippet is correct, it would be nice to have it as part of the documentation.

broerse commented 6 years ago

Help is always welcome. Perhaps do a PR?