Inside a component?

[rmcsharry]

I know this has been asked many times but nobody has ever posted code or a guide, so I am stumped.

How does anyone use this amazing add on inside their own component?

I have tried absolutely everything in the past 14 hours to get a simple 'bubble action' for infinityLoad to propagate up to the route where the model is defined and trigger the 2nd page.

Code is here.

[hhff]

Hi @rmcsharry ! Sorry you're having trouble. Everything works just like in regular ember - you just need to pass the action up the tree.

Inside your component:

export default YourComponent.extend({
  infinityLoadAction: 'infinityLoad',
  actions: {
    infinityLoad(infinityModel) {
      this.sendAction('infinityLoadAction', infinityModel);
    }
  }
})

Let me know!

[rmcsharry]

I managed to get the action to bubble up, but it never triggered the model to reload. Perhaps because I never passed 'infinityModel' as the second param in the sendAction call. I'll try again tomorrow now I've seen your response. Thanks, btw!

[hhff]

Yup - that would be the reason! It needs that to handle nested
infinityRoutes

On Wed, 14 Sep 2016 at 15:03 Richard McSharry [email protected]
wrote:

I managed to get the action to bubble up, but it never triggered the model
to reload. Perhaps because I never passed 'infinityModel' as the second
param in the sendAction call. I'll try again tomorrow now I've seen your
response. Thanks, btw!

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
#180 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACu4_ENqvUvkDwShpHnYtNedWTBNJlFcks5qqETqgaJpZM4J44rZ
.

[rmcsharry]

@hhff Thanks for your help, it now works!

Why do you say in the other thread that you don't really recommend using it in a component?

You also said you can't think of a good use case. I have one 👍

I am hoping I can now extend my component to be a 'generic' listing component that can take different models and list out the data in a basic way, and infinity-load it.

Think of an old-fashioned table - you just tell it what data to display and it gets laid out in rows and columns. So a basic version of that, but just a simple list, which basically has 3 inputs: the data model, a sort order, a route-action to select an item. Maybe later I can add a search filter box.

This then allows you to build an app very quickly - just drop in the component for each 'index' route. It's a kind of 'wireframe' component I guess that later you will replace with something more polished. Or maybe I'll enhance it to accept a template to go with the data ;)

[hhff]

Got it! Usually in that case I'd recommend having the list component be siblings to the infinity-loader. Different strokes for different folks, but I prefer my components being composable, rather then complex & nested.

[rmcsharry]

Good point, I cannot disagree with composition as a strategy.