EmberJS 2.7 - infinity-model add-on inside a component - how to 'bubble up' the infinityLoad action

Question

I am using the awesome plugin infinity-loader. It works great, providing I use it on the template of the route it is bound to.

But like a lot of people, now I decided to try and use it on a component. Oh dear. I understand how to bubble/send actions like this fiddle shows and this question explains.

Sadly this, this and this did not help.

What is strange is that after the first page, the Infinity add-on fires the action infinityLoad - if I remove my handler in my component, then I see the error 'nothing handled' the action in the console, so I know that the action is firing when I scroll to the end of the list.

But when my component 'bubbles it up' it just seems to get swallowed in the route and does not cause the add-on to fire its own internal handler.

/templates/employees/index.hbs

{{employees-list employeeModel=model sendThisAction='infinityLoad'}}

/routes/employees/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 });
    },

    // is this really needed, because my understanding is this action is automatically handled by the addon?
    actions: {
      infinityLoad() {
        this.get('infinityModel').loadMore();
      }
    }
});

/templates/components/employee.hbs

<div class="list-group">
    {{#each employeeModel as |employee|}}
      <...display some employee stuff ...>
    {{/each}}
</div>
{{infinity-loader infinityModel=employeeModel}}

/components/employee-list.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    infinityLoad() {
      this.sendAction('sendThisAction');
    }
  }
});

NOTE I also tried solving this problem using this great add-on from Dockyard for sending actions to routes. The add-on works, but not my code.

UPDATE

With the code below the event now bubbles up and when I scroll the page I get the alert. But now I need to figure out how to get the loader (which is basically the grandchild of the route) to load the next page.

/templates/employees/index.hbs

{{employees-list employeeModel=model infinityLoad='infinityLoad'}}

/routes/employees/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 });
    },

    // is this really needed, because my understanding is this action is automatically handled by the addon?
    actions: {
      infinityLoad() {
        alert('here we are'); <- test
      }
    }
});

/templates/components/employee.hbs

<div class="list-group">
    {{#each employeeModel as |employee|}}
      <...display some employee stuff ...>
    {{/each}}
</div>
{{infinity-loader infinityModel=employeeModel}}

/components/employee-list.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    infinityLoad() {
      this.sendAction('infinityLoad');
    }
  }
});

This helped figure that part out.

score 2 · Accepted Answer · answered Sep 16 '16 at 10:53

So finally with some input from the developer of the infinity-loader component, this is what is needed to use it in a component:

app/components/employee-list.js:

  infinityLoadAction: 'infinityLoad',

  actions: {
    infinityLoad(employeeModel) {
      this.sendAction('infinityLoadAction', employeeModel);
    }
  }

The infinityLoad is fired automatically when you have the loader in your template. You just have to 'catch and throw' it like above.

Also, you don't need to add any code in your route to catch it, because the infinity-loader will catch the infinityLoadAction that you throw from the component.

score 0 · Answer 2 · answered Sep 09 '16 at 14:35

0

I Assume you can solve your problem with changing

{{employees-list employeeModel=model sendThisAction='infinityLoad'}}

to

{{employees-list employeeModel=model action='infinityLoad'}}

and changing this

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

to

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

I am also suspect to this

 infinityLoad() {
        this.get('infinityModel').loadMore();
      }

to change with

 infinityLoad() {
        this.loadMore();
      }

let's give it a try, as I don't have your code I cannot debug but based on fact on component and how we can pass that to route it should work hopefully. if it's not working let me know or maybe you can share a live version.

answered Sep 09 '16 at 14:35

Majid

2,507
2
19
18

Thanks I tried that before. Now I just tried it again just to be 100% sure and nope it doesn't work. The action just seems to 'disappear'. You can see the code here: https://github.com/rmcsharry/trekapp/tree/testing-infinity-model – rmcsharry Sep 09 '16 at 22:10
where did you use this {{employees-list employeeModel=model sendThisAction='infinityLoad'}} I haven't seen that, can maybe this is not your latest code ? and also I have checked your Online version on Heroku, it look ok, do you use component for that or it's something esle ? – Majid Sep 10 '16 at 06:18
The App on heroku is not using the component, the inifinityLoader is in the template of the route, that is why it works on there (master branch). On the branch I linked you to I removed 'sendthisAction' and updated that branch with the code you suggested in your answer – rmcsharry Sep 10 '16 at 13:08
This line "{{employees-list employeeModel=model sendThisAction='infinityLoad'}}" was in /templates/employees/index.hbs (which is now changed as per your answer) – rmcsharry Sep 10 '16 at 13:10

EmberJS 2.7 - infinity-model add-on inside a component - how to 'bubble up' the infinityLoad action

2 Answers2