adopted-ember-addons / ember-infinity Goto Github PK

Hi,
We are using latest version of ember-infinity. When we upgraded to ember2.0 we got the error that semver is not defined. Are we supporting latest version of ember data?

When I turn on destroyOnInfinity I get an exception in _checkIfInView after all the data has loaded and presumably the loader has been deleted. Everything is working fine since the data has already been loaded, but it seemed like there is something worth looking in to.

Exception:

Uncaught TypeError: Cannot read property 'offset' of undefined_checkIfInView @ infinity-loader.js:45

Line in question:

var selfOffset = this.$().offset().top;

Template:

{{resources-list resources=model}}
{{#infinity-loader infinityModel=model destroyOnInfinity=true}}
  <i class="fa fa-circle-o-notch fa-spin fa-2x" />
{{/infinity-loader}}

Hello, just trying to make it work with both ember and ember-data 2.0.0, but it won't. Console shows:

Uncaught Error: You attempted to schedule an action in a queue (afterRender) for a method that doesn't exist

dpmv.js:15891 DEPRECATION: A property of <dpm@view:-outlet::ember533> was modified inside the didInsertElement hook

11443 Uncaught Error: You attempted to schedule an action in a queue (afterRender) for a method that doesn't exist

Uncaught TypeError: Cannot read property '0' of undefined

Uncaught TypeError: Cannot read property 'off' of null

Thanks for the awesome work :)

I am sending this response

but get the error" Error: Ember Infinity: Could not fetch Infinity Model. Please check your serverside configuration." which is pretty much useless for diagnosing the issue so I still don't know what's wrong.

(Includes, old broccoli filter that is slow, and hurts build performance)

https://github.com/hhff/ember-infinity/blob/master/package.json#L46

Hey @hhff,

Maybe there's already an easy way to do this and I'm not seeing it. Can you tell me if and how you've accomplished such behaviour before?

Cheeerio

This is kind of a crazy idea, but I might end up implementing it.

The idea would be, in the route, instead of _currentPage we have a _minPage and a _maxPage. Whenever we refresh the model, they both start as options.startingPage.

We also have _canLoadNextPage and _canLoadPrevPage. These are computed by comparing _maxPage to _totalPages and _minPage to 1, respectively.

Finally, _infinityLoad would take a direction, which would control whether we do _maxPage++ or _minPage-- and whether we do model.pushObjects or model.unshiftObjects.

On the component side, I would have two infinity loaders, one at the top of my list and one at the bottom, and the scroll checks would be different for each. Alternatively I might implement it in a component that wraps my list and just checks its scroll offset.

So, this is kind of a crazy idea and I'm not sure if it's generally useful enough to be included in this library, but if it were possible to make it work backwards-compatibly (no pun intended) with the current ember-infinity interface, would anyone be interested in including it as part of this library?

This is still pretty speculative but it does solve some business needs I'm up against, and if we end up deciding to implement two-way infinite scroll it might be a nice thing to contribute.

This error is thrown when the infinity-loader component enters the view.

DEBUG: -------------------------------
DEBUG: Ember             : 2.2.0
DEBUG: Ember Data        : 2.2.1
DEBUG: jQuery            : 2.1.4
DEBUG: -------------------------------

Just a thought for a post #9 world.

The current API for infinityModel involves passing perPage and startingPage properties -- which are then converted to per_page and page parameters for the backend.

Once people start having the ability to pass arbitrary parameters to infinityModel, I can imagine (especially if they're simultaneously working on the backend API) they may accidentally provide page (vs startingPage) and per_page (vs perPage) options -- which would [currently] be ignored.

I think it might make sense that the logic is a bit more forgiving, eg:

var startingPage = options.startingPage || options.page || 1;
var perPage      = options.perPage || options.per_page || this.get('_perPage');

This is a bit of an edge case, but in the event you set perPage low enough so that it would take more than two requests to fill the viewport, it simply stops after the second page of results is loaded.

My expectation is that it would continue to load items until the infinity-loader was pushed out of view or the results were all retrieved/displayed.

Summoning @kellyselden @mike-north

Wondering if it makes more sense to lock the version here to Ember CLI? That way we just guarantee that it supports the corresponding Ember CLI version (and it's bundled Ember & Ember Data versions)...

I see pros & cons to it.

Thoughts team? @stefanpenner / @rwjblue do you think minor addons should adopt the lock-step versioning approach also?

Can this be used without ember-data?

I am currently using ember-data without using adapters/fetching. I plan to remove ember-data from my app soon. Will either of these two scenarios work with ember-infinity?

On my homepage I've got a button to load more posts.
In order to upgrade to Ember 1.13 I'd like to switch to using ember-infinity but from what I've seen I won't be able to have a button like this without rewriting a lot of ember-infinity.

Do you have an idea how I could use ember-infinity nonetheless.

In my app, i have an infinity-list of items and a detail-view. I would like to store the current_page, so that navigating back from the detailview will take the user to the last position.

Is that possible?

When trying to execute the command

ember install:addon ember-infinity

I get the following message:

Cannot read property 'name' of undefined
TypeError: Cannot read property 'name' of undefined
at D:\projects\projectTest\brighter-ember\node_modules\ember-cli\lib\models\project.js:459:53
at find (D:\projects\projectTest\brighter-ember\node_modules\ember-cli\node_modules\lodash-node\modern\collections\find.js:64:11)
at Project.findAddonByName (D:\projects\projectTest\brighter-ember\node_modules\ember-cli\lib\models\project.js:458:20)
at Class.module.exports.Task.extend.findDefaultBlueprintName (D:\projects\projectTest\brighter-ember\node_modules\ember-cli\lib\tasks\addon-install.js:63:30)
at Class.module.exports.Task.extend.installBlueprint (D:\projects\projectTest
brighter-ember\node_modules\ember-cli\lib\tasks\addon-install.js:52:30)
at Class. (D:\projects\projectTest\brighter-ember\node_modules\ember-cli\lib\tasks\addon-install.js:42:19)
at lib$rsvp$$internal$$tryCatch (D:\projects\projectTest\brighter-ember\node_modules\ember-cli\node_modules\rsvp\dist\rsvp.js:489:16)
at lib$rsvp$$internal$$invokeCallback (D:\projects\projectTest\brighter-ember\node_modules\ember-cli\node_modules\rsvp\dist\rsvp.js:501:17)
at lib$rsvp$$internal$$publish (D:\projects\projectTest\brighter-ember\node_modules\ember-cli\node_modules\rsvp\dist\rsvp.js:472:11)
at lib$rsvp$asap$$flush (D:\projects\projectTest\brighter-ember\node_modules\ember-cli\node_modules\rsvp\dist\rsvp.js:1290:9)

Thus I cannot install the addon

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?

https://github.com/hhff/ember-infinity/blob/master/addon/mixins/route.js#L315 calls newObjects.get('content') to add new objects. But in Ember 1.13.10, this returns an array of InternalModel objects, not model classes.

From emberjs/data#3604, it looks like this should be newObjects.toArray() instead. I don't know the history, so it's hard to tell what that might break. Suggestions?

In my app I have many scrollable divs nested. This causes the loadMoreAction to fire prematurely from the component. Even when defining the scrollable attribute on the component.

I lack experience to really test en provide a working solution for everyone. By changing the way the offset is calculated when position is other than relative fixed my issue.

For relative ( original ):

var selfOffset  = this.$().offset().top;
var scrollableBottom = scrollable.height() + scrollable.scrollTop();


For fixed / absolute:

var selfOffset  = this.$().position().top;
var scrollableBottom = scrollable.height();

ember-infinity/addon/components/infinity-loader.js
Original:

_checkIfInView() {
  var selfOffset       = this.$().offset().top;
  var scrollable       = this.get("scrollable");
  var scrollableBottom = scrollable.height() + scrollable.scrollTop();

  var inView = selfOffset < scrollableBottom;

  if (inView && !this.get('developmentMode')) {
    this.sendAction('loadMoreAction');
  }
},

Edited ( works for me ):

_checkIfInView() {

  var scrollable = this.get("scrollable");
  var selfOffset;

  var scrollableBottom;



  if(scrollable.css('position') == 'relative') {

    selfOffset       = this.$().offset().top;

    scrollableBottom = scrollable.height() + scrollable.scrollTop();

  } else {

    selfOffset = this.$().position().top;

    scrollableBottom = scrollable.height();

  }



  var inView = selfOffset < scrollableBottom;



  if (inView && !this.get('developmentMode')) {

    this.sendAction('loadMoreAction');

  }

},

Hi. I just updated my ember app (ember from 1.12.2 to 1.13.2 and ember.infinity from 0.0.4 to 0.0.10) and since then my app/templates/components/infinity-loader is no longer used, instead I'm seeing the default template. Don't know where to start looking into this.

So we've started using the liquid fire addon and whenever I try to animate a page that contains ember-infinity, I get the error that there are multiple scrollable elements are found.

After some short digging, it appears that liquid fire clones the whole render field and then animates that part.

I'm using liquid-if. I'll let you know when I have a working work-around

It's pretty easy to do. I've added it to ember-cli and broccoli-jscs. Just want to see @hhff if you want it. It may require me becoming a project owner, but I don't remember. I can first try it at my current rights level.

DEPRECATION: Ember.keys is deprecated in favor of Object.keys [deprecation id: ember-metal.ember.keys]

Update please

How can I update currentModel from a route action ? now it not seems to be working?

Thanks

HHFF -- great work with this package, it's been really easy-breezy so far. It's been working great at the basics, but I have run into an issue with a bound parameter and maybe I'm just doing it wrong.

I am passing a bound filter parameter called "year", and want to dynamically change which year I am looking at with a select. I have successfully bound this parameter and it's doing what I expected with one slight caveat...

I default to 2015, which has 2 pages to load. When I switch to 2014 and clear the store for my model (resetting the list, essentially) it loads the first page as page 2 of 2 instead of page 1 of 2 as a new set of pages to load from.

What is the best practice here? Should I reload the page with a query parameter for year and just do it that way or is there a way to do it without a refresh by just resetting the startingPage parameter of the InfinityModel?

A property of <frontend@view:-outlet::ember390> was modified inside the didInsertElement hook. You should never change properties on components, services or models during didInsertElement because it causes significant performance degradation
Ember 2.0.0

It'd nice to add to docs what addon expects from backend :

Send meta.total_pages in response

Took me some time to figure out. :)

I need to remove some items from array (when user deletes post). Is there way how to do it? I used to use this approach emberjs/data#3313 but its not supported anymore. Simply copying items in route to array does not work either.

At a couple places in the route mixin (here and here), there is a promise failure handler that catches all errors and throws a generic "Could not fetch Infinity Model" error. This makes it quite difficult to determine what the actual error was – in my case the server response was successful, and I had to do some "pause on all exceptions" debugging to find out that it was ember-data telling me an association wasn't set up correctly. Is there an advantage to doing things this way? Why not allow the real error to surface?

Hi there,

I wonder if infinityModelUpdated and infinityModelLoaded are meant to only be internal? I'm using them for notification and verification, just wondering if they've been missed in the documentation?

Thanks,

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!

I read following Issues #42 #47 #54 #56.
I need filter and search params in the request and my problem is, if I call this.refresh() in queryParamsDidChange() then i get the following error:

Uncaught TypeError: scrollable.height is not a function
_checkIfInView @ infinity-loader.js:48
...

This is my code in the Route:

  model: function(params){
    return this.infinityModel("product",params);
  },

  actions:{
    queryParamsDidChange:function(params){
      this.refresh();
    }
}

I can't seem to find the option.

When I select new filters, I want to 'reset' infinity as it were. However, I don't know if it's possible as of this moment with ember-infinity?

Thanks!

My backend, Sails delivers paginated data like in this form /api/posts?skip=5&limit=5.
skip means that 5 entries are skipped (not five pages).

Is there any way to get that behaviour running with ember-infinity? If not I could extend it to have a switch bool: skipInsteadOfPage (false) to include this behaviour.

In my backend the first page with 5 entries would be: /api/posts?skip=0&limit=5
The second page is: /api/posts?skip=5&limit=5

I'm a bit new to JSONAPI, but it looks like the meta key goes away and becomes the links key. I tried the new JSONAPIAdapter and doesn't look like this addon plays well with it. Perhaps we can first make the response format overridable, to make the user handle the links key themselves and transform it into something we expect. We could also sniff the adapter and try to pick the response format automatically.

Comments welcome because this is just the beginning of my thoughts.

I have a list with a search feature. When a user performs a search I need to remove all items from the list and perform a new query to populate the list.

So far the best I have got is an action on the route that looks like

this.set('controller.model', this.infinityModel("items", {
id: params.Uid,
perPage: 25,
startingPage: 1,
filter: 'test'
}))

This deletes the items and does a new query but the scrolling fails. (Also I would prefer to be able to do this on the controller). I couldn't find any documentation on how to reset the list and wasn't sure the best place to ask how to perform this.

Repro:

• Implement twitter-style min_id pagination, instead of page-number-based pagination, using boundParams to recalculate the query params for each page: http://www.sitepoint.com/paginating-real-time-data-cursor-based-pagination/
• Create an infinite model on a route with a template on a long page, but a small per-page count, so that the loader component is still visible after the first page of results has loaded

Result: The first page of results is rendered twice.

Although the page number is incremented, the updateInfinityModel method is not called on the first page load, and the infinityModelUpdated hook is only called afterRender and thus after the second page load is already triggered. Therefore, any params necessary for the query besides the page number have not been updated since the first page was loaded.

There is actually one issue and one suggestion :)

1. when the page renders the infinity-loader component it assigns the guid to the ID. This makes the scrolling never trigger:

the html to support the ID assigning (how it's rendered):

<div id="ember479" class="ember-view infinity-loader">  <span>Loading Infinite Model...</span>
</div>

infinity-loader.js

Ember.$(window).on("scroll."+this.get('guid'), function() {

should be

//mind the space
Ember.$(window).on("scroll #"+this.get('guid'), function() { 

2. I would like to suggest making a string property 'scrollElement' that is used to determine what scroll element is used, with a default to window. My application has the overflow on a different element than window.

Ember.$(window).on("scroll."+this.get('guid'), function() {

will be

Ember.$(scrollElement).on("scroll."+this.get('guid'), function() {

I'm trying this out in my app.

export default Ember.Route.extend(InfinityRoute, {
  model() {
    return this.infinityModel('user', { perPage: 10, startingPage: 1 });
  },

  perPageParam: 'pageSize'
});

The first request is

http://localhost/api/v1/users?page=1&pageSize=10

but the second request is

http://localhost/api/v1/users?page=2&per_page=10

The model hook is not getting called the second time if that helps.

[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

Seems like the ember-cli-version-checker dependency has to go to "dependencies" and not "devDependencies".

$ ember version
version: 0.2.5
node: 2.0.2
npm: 2.10.0

Running an ember command crashes with this error.

Cannot find module 'ember-cli-version-checker'
Error: Cannot find module 'ember-cli-version-checker'
  at Function.Module._resolveFilename (module.js:337:15)
  at Function.Module._load (module.js:287:25)
  at Module.require (module.js:366:17)
  at require (module.js:385:17)
  at Object.<anonymous> (/home/jan/code/veltro/veltro/node_modules/ember-infinity/index.js:4:15)
  at Module._compile (module.js:431:26)
  at Object.Module._extensions..js (module.js:449:10)
  at Module.load (module.js:356:32)
  at Function.Module._load (module.js:311:12)
  at Module.require (module.js:366:17)
  at require (module.js:385:17)
  at Function.Addon.lookup (/home/jan/code/veltro/veltro/node_modules/ember-cli/lib/models/addon.js:665:19)
  at /home/jan/code/veltro/veltro/node_modules/ember-cli/lib/models/addons-factory.js:47:36
  at visit (/home/jan/code/veltro/veltro/node_modules/ember-cli/lib/utilities/DAG.js:23:3)
  at DAG.topsort (/home/jan/code/veltro/veltro/node_modules/ember-cli/lib/utilities/DAG.js:82:7)
  at AddonsFactory.initializeAddons (/home/jan/code/veltro/veltro/node_modules/ember-cli/lib/models/addons-factory.js:44:9)
  at Project.initializeAddons (/home/jan/code/veltro/veltro/node_modules/ember-cli/lib/models/project.js:329:36)
  at Project.eachAddonCommand (/home/jan/code/veltro/veltro/node_modules/ember-cli/lib/models/project.js:380:10)
  at module.exports (/home/jan/code/veltro/veltro/node_modules/ember-cli/lib/cli/lookup-command.js:46:13)
  at CLI.<anonymous> (/home/jan/code/veltro/veltro/node_modules/ember-cli/lib/cli/cli.js:32:26)
  at lib$rsvp$$internal$$tryCatch (/home/jan/code/veltro/veltro/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:489:16)
  at lib$rsvp$$internal$$invokeCallback (/home/jan/code/veltro/veltro/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:501:17)
  at lib$rsvp$$internal$$publish (/home/jan/code/veltro/veltro/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:472:11)
  at lib$rsvp$asap$$flush (/home/jan/code/veltro/veltro/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1290:9)
  at doNTCallback0 (node.js:408:9)
  at process._tickCallback (node.js:337:13)

Hi,
I'm not sure there is a clean way to reverse order using route action, or controller property.
I was wondering if queryParams can be used for this purpose but don't have idea how reload/update model. It makes transition but don't trigger model hook in route.

Should I implement separate route for each order?

I will be grateful for some advices how to refire model hook when some queryParam property change.

https://github.com/hhff/ember-infinity/blob/master/addon/mixins/route.js#L204
should be "Could not fetch Infinity Model. Please check your serverside configuration." as i see

For my application I would like to send along extra options, like sorting / active / etc. filters. Now I implemented some extra logic for me in the route.js, but I guess creating an issue would be the right thing to do :).

Hi there,

Thanks for the awesome addon.
I've just upgraded from 0.0.4 to 0.0.8 and now it shows the error:

Cannot find module 'ember-cli-version-checker'

when starting with ember s. While I can certainly include it in my package.json, I wonder whether this was meant to be included as a dependency for the app to include?

I have a problem witth totalPages parameter. I use kaminari gem together with grape to serve paginated data from server. Payload header looks like this:

{
  "x-per-page": "20",
  "x-offset": "0",
  "etag": "W/\"e7fd94178cf2d6aa33c6599b64bd29f3\"",
  "vary": "Origin",
  "content-type": "application/json",
  "cache-control": "max-age=0, private, must-revalidate",
  "x-runtime": "0.057154",
  "x-total-pages": "10",
  "x-next-page": "2",
  "x-page": "1",
  "content-length": "6057",
  "x-total": "192",
  "x-request-id": "3d84c4c7-4c8e-4d78-a8c5-ae2c535b09b7"
}

As you can see total-pages is present here but when I stopped _canLoadMore in my route to see what's going on there I got nothing when trying to to this this.get('_totalPages') It seems like it doesn't fetch totalPages. When I return true in _canLoadMore everything works fine.

As per: #46