Basic Usage

[ssaul]

The following statement from Basic Usage is a bit ambiguous

Now, whenever the infinity-loader is in view, it will send an action to the route (the one where you initialized the infinityModel) to start loading the next page.

When the new records are loaded, they will automatically be pushed into the Model array.

The only action that is spoken about is infinityLoad and it is at the end of the readme. You may want to consider mentioning that you have to implement the action (and mention the actions name) in the Basic Usage. It reads like the basic usage would have worked with out adding an action to the route.

[hhff]

Hi @ssaul - if you've got the infinity-loader component on the corresponding template (or any template deeper in the view tree for that matter) to your infinity-route, you won't need to implement any actions, everything will "just work".

The only case where you need to explicitly write your own action handler is when your infinity-loader is within another component. In this case you either need to bubble it up, or use the ember-route-action-helper addon from Dockyard to pass it down to the component.

I feel like most intermediate Ember people are aware of this - but I can see how it would be a stumbling block for beginners. I'll write something shortly for the readme - thankyou for picking up on this!

[rmcsharry]

I'm stuck with this issue now - I have moved the InfinityComponent down to a lower-level component than the index route and now it does not work again, only loads the first page again!

I have installed the ember-route-action-helper from Dockyard already since I use that in some of my own components.

But I am stumped as to how do I pass down or bubble up the InfinityLoad - where do I put what, basically? I'd be more than happy to update the docs with a guide if only I can figure this one out!

[rmcsharry]

I tried this in my index template, where my component is, but that didn't work.

{{employees-list employeesList=model infinityModelLoaded=(route-action 'infinityLoad')}}

[rmcsharry]

Tried adding this to my component, which got rid of the console error about not having an action handler, but still I cannot figure out how to get the next page to load 👎

  actions: {
    infinityLoad() {
      this.sendAction();
    }
  }

OMG it sucks being an Ember lightweight noob!

"You know nothing John Snow!" comes to mind here.

[rmcsharry]

Before I go hurl myself off a bridge, I also tried this (for future reference to prevent anyone else trying this and failing also).

In my route index.hbs:

{{employees-list employeesList=model loadMore=(action 'infinityLoad' target=mycontroller)}}

in my route index.js

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

export default Ember.Route.extend(InfinityRoute, {
    totalPagesParam: "meta.total",

    model() {
        return this.infinityModel("employee", { perPage: 10, startingPage: 1 });
    },

    setupController(controller) {
            this._super(...arguments);
            controller.set('mycontroller', this);
    },

    actions: {
        infinityLoad() {
            this.infinityModel.infinityLoad;
        }
    }
});

in my component employees-list.js:

  actions: {
    infinityLoad() {
      this.sendAction('loadMore');
    }
  }

Of course it doesn't loadMore, why would it, this is EmberFFrustration. The actions fires, it comes back to the 'mycontroller' and calls the action defined in the route, and nothing happens.

To really frustrate me the UI shows "Loading infinity Model" (accompanied by an evil laugh...or maybe I am just imagining that bit).

[ssaul]

@rmcsharry I was not able to figure this one out either. I ended up taking ember-infinity out of my component and just implementing it in the route and respective template. Would have been nice to figure this out.

[rmcsharry]

@ssaul I spent a few more hours on this today, and still cannot get it to work. I have tried everything. I laugh because I have ended up doing the same as you (moving ember-infinity to the route's template).

[rmcsharry]

Added it to SO, since pretty sure lots of people would love to use this inside their own components.

[hhff]

Thanks guys - I don't really recommend using this inside of a component (I can't currently think of a good reason for it) - but it works the same as regular-old-ember action bubbling.

Please check #180 for my recommendation.