strange behavior ember infinity addon

Question

I try to implement ember-infinity add-on in my app,

So I updated my Api to return the same meta uses by the add-on, but the behavior is strange.

I expect the first n records display on my div, and when I go to the bottom it fires the next request with others 20 records.

But it doesn't happen,

When I request my index page, the add-on start to fire x requests depending of the total_pages number, and this is the strange parts, I don't understand why fire all the request automatically, maybe is the ember version?.

To clarify my issue, here is my code.

Meta API

"meta": {
        "page": 3,
        "per_page": 20,
        "total_pages": 3,
        "total_records": 58
    }

ember route

// route/index.js
import Ember from 'ember';
import InfinityRoute from "ember-infinity/mixins/route";

export default Ember.Route.extend(InfinityRoute, {
    model() {
        return this.infinityModel('trademark', {perPage: 20, startingPage: 1});
    }
});

template index

<div class="row" id='list-trademarks'>
{{#each model as |trademark|}}
    <div class="col s12 m6 l4">
      <div class="card small" style='padding-top: 0 !important; margin-top: 0 !mportant'>

           {{card-limit-display relCards=trademark.marcanet title=trademark.title panref=trademark.id total=trademark.relatedTotal}}

        <div class="card-reveal">
          <span class="card-title grey-text text-darken-4">{{trademark.title}} similares.<i class="material-icons right">close</i></span>
          {{card-hidden hiddenCards=trademark.marcanet}}
        </div>
      </div>
    </div>
{{/each}}
{{infinity-loader infinityModel=model  destroyOnInfinity=true}}
</div>

Ember info

DEBUG: Ember           : 2.4.5
DEBUG: Ember Data      : 2.5.2 
DEBUG: jQuery          : 2.2.3

I'm following the README but I can't get it works.

Answer 1

The problem is that you are trying to get the your data by the routers model hook. Your route is not changing so the model hook is not called again.

I would suggest to refactor your code to get the data in a component.

1. keep the route model hook empty

2. create a wrapper component, where you will load your data, and cache it, so you can add + load the next page

3. In the wrapper component you will need to cache the page number

4. Define an action on the infinity-loader component to which you can handle in the wrapper component, which will say get me the next page

5. Implement the function to get the data from the server in the wrapper component. I would advise you to create an observer on the page number variable. so you can run it in the didInitAttrs hook

The implementation of the wrapper component might look like this:

export default Ember.Component.extend({
    pageNumber: 1
    items: null

    didInitAttrs: function (){
        this._super.apply(this, arguments)
        //We need to initialize array like this, because otherwise, if we have 
        //the component twice on the page then it will make problems, because it is the same object
        this.set(items, Ember.A())
    }

    // We call first this function during the didInitAttrs phase so we have the first page, and after that when the pageNumber changes
    getData: Ember.on('didInitAttrs', Ember.observer('pageNumber', function(){
        component = this;
        //Most likely it returns a promise
        this.infinityModel('trademark', {perPage: 20, startingPage: this.get('pageNumber')}).then(function (trademarks){
            component.get('items').pushObjects(trandemarks.toArray())
        })


    }))

    actions: {
        //incrementing page number, so the observer fires
        getNextPage: function(){
            this.set('pageNumber', this.get('pageNumber') + 1)
        }
    }
});