How to load two different infinity model on same page?

[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?

[hhff]

Hi @adityaU - currently the library only supports a single Infinity Model per Route. I would love a PR for this functionality!

[asross]

@hhff we're (potentially) running into this issue as well. Perhaps it would make sense to allow ember-infinity to be structured as a component? Components > everything else seems to be the overall direction Ember is moving in, too.

[hhff]

It's an ember anti-pattern to do data fetching from a component @asross - that's what routes are for.

It's not crazy for us two support multiple infinityModels on a route, we just don't currently.

[asross]

It's an ember anti-pattern to do data fetching from a component @asross - that's what routes are for.

It's not crazy for us two support multiple infinityModels on a route, we just don't currently.

I'm hearing competing viewpoints on this. A lot of people inside my company are arguing that when you need composable/reusable access to the same data, it's okay and even good to do data fetching inside a component.

Imagine you want to embed an infinite-scrolling list in many different pages or dynamically inside a modal. Accomplishing this using subroutes would be extremely painful, because you'd have to create a new route for every new embedding. Components, on the other hand, are perfect for this.

You could probably work out something with multiple infinity models on a route each passed into a component, but that might be a headache, especially if the number of them is dynamic.

[hhff]

I disagree, a component is an encapsulation of "interaction & display logic". To throw data fetching logic into the mix is only going to cause complications and muddying of concerns.

Components act on the data they are fed. Ask anyone who's attempted to build a complex React app without Flux whether components should control their own data (aka, me).

Composablity is important, but where the lines of separation are drawn is MORE important. In Ember, the line is drawn on the URL (aka - the Route).

What you're saying is that Ember should not have routes - just a router and components. That's chaos! The reason these constructs exist is to bring order to complexity. That's the ember way.

TLDR: A bunch of very smart people decided (correctly) that components should not have access to the Ember Data store. They should be an interface, not an island. Ember Infinity has no plans to violate that.

[hhff]

FWIW, the infinity-loader component that ships with ember-infinity accepts a model agrument.

Supporting multiple infinityModels would be as simple as:

{{infinity-loader infinityModel=model.products}}

{{infinity-loader infinityModel=model.comments}}

[asross]

Fair points, and the FWIW is worth a lot. I do still feel like there's something missing from Ember that could give you clear lines of separation and composability, but I can definitely see the imminent danger for things to spiral out of hand.

Supporting multiple infinity models on the same route seems like it would ensure that ember-infinity remains true to the Ember Way while at the same time not obstructing attempts to make its applications more composable.

[wayne-o]

What about this sort of thing:

return Ember.RSVP.hash({
                eventInstance: this.store.query('eventInstance', {
                    slug: slug
                }),
                lineup: this.infinityModel("lineup", { perPage: 24, startingPage: 1, slug: slug, sort: 'familiarity desc', currentUserAttending: false })
            });

How can I get that working?

[davidgoli]

@wayne-o that should not be a problem, as you only have one infinityModel instance.

A big obstacle to supporting multiple infinityModel instances on the same route is that the InfinityRoute mixin is tightly coupled to a single Route's parameters. For instance, it defines a single _modelPath on the Route it's mixed in to, along with page params for that model.

However - I haven't tested this, but it should be possible, to mix in InfinityRoute to a different Ember.Object as long as a) that Ember.Object is provided a path to the model, and b) that Ember.Object has a reference to this.store. I would encourage ambitious & interested devs needing to solve this problem to try out that route and report back with issues.

[hhff]

👍 what @davidgoli said.

It shouldn't be all that difficult to move the ember-infinity focus to an OO style instance based pattern.

[hhff]

If anyone needs this - please have a crack! closing for now