load multiple models in an infinity route

[mockra]

Is there anyway to support an InfinityModel if it's not the only model being loaded through the route. Here's an example of what I'd like to do:

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

export default Ember.Route.extend(InfinityRoute, {
  model(params) {
    return Ember.RSVP.hash({
      project: this.store.find('project', params.id),
      users: this.infinityModel('user', {
        perPage: 20,
        startingPage: 1
      })
    });
  },

  setupController(controller, model) {
    controller.setProperties(model);
  }
});

Thanks!

[hhff]

Yup! You just wanna set the modelPath for the infinityModel like so:

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

export default Ember.Route.extend(InfinityRoute, {
  model(params) {
    return Ember.RSVP.hash({
      project: this.store.find('project', params.id),
      users: this.infinityModel('user', {
        perPage: 20,
        startingPage: 1,

        // ---> THE MAGIC
        modelPath: 'controller.model.users'

      })
    });
  },

  setupController(controller, model) {
    controller.setProperties(model);
  }
});

[mockra]

Thanks a ton! Worked like a charm, just had to use, modelPath: 'controller.users' for the modelPath.

[hhff]

RIGHT yeah i missed the setup controller call NICE

[adityaU]

export default Ember.Route.extend(InfinityRoute, {
    model(){
        return {
            sellableProducts: this.infinityModel('product', {product_type: 1, perPage: 30, startingPage: 1, modelPath: 'controller.model.sellableProducts'}),
      adsProducts: this.infinityModel('product', {product_type: 0, perPage: 30, startingPage: 1,modelPath: 'controller.model.adsProducts'}),
      trendingProducts: this.store.query('product', {trending: true, product_type: 1})
        };
   },
   updateInfinityModel(newObjects){
      let infinityModel = this.get(this.get('_modelPath')).get('content');
      let content = newObjects.get('content');
      infinityModel.pushObjects(content);
   }

});

How to load two different infinity model on same page?

[mockra]

You would need to wrap your model in a Ember.RSVP.hash. Here's an example:

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

export default Ember.Route.extend(InfinityRoute, {
  model(params) {
    return Ember.RSVP.hash({
      trendingProducts: this.store.query('product', {trending: true, product_type: 1}),
      sellableProducts: this.infinityModel('product', {
        perPage: 30,
        startingPage: 1,
        product_type: 0,

        // ---> THE MAGIC
        modelPath: 'controller.sellableProducts'
      })
    });
  },

  setupController(controller, model) {
    controller.setProperties(model);
  }
});

[hhff]

thanks @mockra - however I believe he wants two different infinityModels, which we don't currently support on the same route

[mockra]

Ah you're right. Sorry, just woke up :D.

[hhff]

good morning @mockra !!

[chrsvl]

Thanks a lot! Do you think it could be useful to add this use case in the readme?

[venkz]

@hhff
Hey, I have an infinity model on route 'aaa' which works on model 'model-a'. In the template for 'aaa' I have an {{outlet}} which loads a new child - route 'bbb' which has an infinity model on 'model-b'.
url is localhost:4200/aaa/bbb

So, the expected behavior is, aaa has an infinity model and should work and its child route has infinity model which should work. BUT IT DOES NOT. Is this in a way same as having 2 infinity active on the same page?

Can you help my understanding here???

[hhff]

HI @venkz - that should work fine provided both routes are setup properly.

The reason we can't have two infinityModels on the same route is related to the RouteMixin assuming a single model. Two routes (regardless of their nesting) allows for two infinity models.

[venkz]

@hhff
The scrollable activity on either of those grids is triggering the loadMore with model-b and looks like the entire context of model-a is lost.

[hhff]

Ahh! Yeah - you'll need to specify the scrollable property for each {{infinity-loader}}, please check the readme for more info 👍

[venkz]

@hhff
Unfortunately I did specify that property!

Looking at your mixin implementation, you haven't specified any property as computed. What this means from the understanding I have is that, a common instance of mixin is shared between all implementing routes. So if my route 'aaa' implemented this first, model is set to 'model-a' and later as the child route is rendered, the mixin's context is changed and since there is no computed alias for each property, they are changed to hold 'model-b'

http://emberjs.com/api/classes/Ember.Mixin.html

[hhff]

I'm not sure I'm following, I'm sorry. If you can put up a repo to reproduce the issue, I'll take a look.

[venkz]

@hhff

I did some debugging having break points. This is what I ended up with.

The scrollable on component is working fine and triggers the this.sendAction('loadMoreAction');
when I check the values of "scrollable" or "this.get('infinityModelName') on component just before sending this action, they are as expected( model-a). BUT

Once the call on route is invoked, it calls
_requestNextPage: function _requestNextPage() {
var modelName = this.get('_infinityModelName');
..
}

The modelName here is always 'model-b'. So, it is pushing new records to model-b instead of model-a

Can you visualize the usecase here? @hhff

[venkz]

Irrespective which scrollable is triggering the event this.sendAction('loadMoreAction'); your route will always request for this.get('_infinityModelName'); which is pointing to the last route that implemented your mixin. (in my case model-b)

@hhff

[hhff]

Hi @venkz ! I'm sorry I still can't visualize this. A demo would be the most useful way to get to the bottom of it.

[venkz]

@hhff

Here you go... https://github.com/venkz/ember-multi-infinity-scroll

I have set it up to use mirage data. There are 2 scrolls on the same page each rendered from different routes. Same as the problem I explained before.

[hhff]

hi @venkz - confirmed this bug. This one is surprising to me:

In ember - when a controller bubbles an action, it will bubble it to the deepest route of the current router state. I had always assumed the target for a controller was the corresponding route, but after further investigation, this is not the case.

You can see this in action if you create a simple button on the parent template, that bubbles an action that's on both the parent & child routes.

I'm going to sleep on this and get back to you!

hx

[venkz]

@hhff Yea, that is true. It is always sending the action to child route when we expect it to send it to parent route!!! This seems to be a bug or "unexpectedly expected" behavior of Ember....

How do you plan to tackle this??

[hhff]

@venkz - please check my PR here: venkz/ember-multi-infinity-scroll#1

That should solve your problem for now.

(most of the changed files are from using ember install, rather than npm install)

Setup an issue to figure out a "nicer" API for this issue. Thanks for reporting + u can follow along here:
#150

[danilovaz]

I'm using Ember 2.9.0 and I'm loading a list of Messages, so I don't know how many total_pages it's have.

So I try to follow the solution with modelPath and

setupController(controller, model) {
    controller.setProperties(model);
  }

But this doesn't work, when I use setupController my model doesn't load data. Any solution to fix this to work without total_page?

[hhff]

Hi @danilovaz - this has nothing to do with the existing issue. Can you please open a new one?

I'd like for Ember Infinity to work for your use case.

[danilovaz]

@hhff Sure, I'll do this. Thanks!