Action to load more data and refresh template

Ember Data
1

I have a working solution with paging working but was exploring how I could load more data and have the results appended to the page. Still learning Ember and exploring ideas at this point before starting a larger project.

I had been trying to get the ember-simple-infinite-scroller working and after removing it and then saw that even a basic action was not reloading … I ended up many hours later exploring and trying solutions without joy.

Many attempts successfully update the model (add more records) but the template never wants to refresh. I thought that if data in the model changed, the template would refresh automatically.

In the mean time, I will work on an alternative approach using ember-impagination module but wanted to better understand why my attempts using an Action are not working.

Using ember-cli 2.8.3, ember-data 2.11.1

Thoughts, Ideas :slight_smile:

templates/testme.hbs - testing me with a controller and a router action (same results) 

    {{#each model as |folder|}}
        <h3>{{folder.title}}</h3>
        <ul>
            <li>NID: {{folder.nid}}</li>
            <li>UUID: {{folder.uuid}}</li>
            <li>Created: {{folder.created}}</li>
            <li>Parent Folder:
                {{# if folder.field_parent_folder}}
                    {{folder.field_parent_folder.title}} - Nid: ({{folder.field_parent_folder.nid}})
                {{else}}
                    N/A
                {{/if}}
            </li>
        </ul>
    {{/each}}

</div>
<h3><button {{action "loadMore"}}>Load More</button></h3>
<h3><button {{action (route-action 'routeLoadMore')}}>Route Load More</button></h3>

controllers/testme.js export default Ember.Controller.extend({

actions: {
    loadMore: function() {
        // Updates the model but does not refresh the template
        this.get('store').query('node--folder', {page: {limit: 20, offset: 100}});
        console.log('loadMore - reload model');
        //this.get('model').reload();
    },

    refreshModel: function() {
        console.log('refresh model');
        this.get('target.router').refresh({page: {limit: 20, offset: 100}});
    }
}

});

routes/testme.js export default Ember.Route.extend({

model(params, transition) {

    console.log('routes/testme', params, transition);

    // Example with pagination working. Also returns the links (model.links)
    return this.get('store').query('node--folder', {page: {limit: params.limit, offset: params.offset}});

},


// If the route gets passed an 'offset' argument, then it should refresh the model
queryParams: {
    offset: {
        refreshModel: true,
    },
},

actions: {

    routeLoadMore: function () {
        console.log('routeLoadMore');
        this.get('store').query('node--folder', {page: {limit: 20, offset: 100}});
        this.refresh();
    },

}

});

2

I approached it like this:

  queryParams = {
    page: {
      refreshModel: true,
    },
  };

  async model({ 'community-district': communityDistrict = '', page = 1 }) {
    // ...
    await this.store.query('project', { 'community-district': cdParam, page: { number: page } });
    return this.store.peekAll('project');
  }