Datalist and paging events. Last item's canGenerate spinner control.

I am trying to switch to enyo 2.4 and I am using enyo.DataList contol with enyo.Collection bound by bindings.

In Collection, I am fetching through an API call 20 results per page. In previous implementation I was using an enyo.List control, and was checking on "scroll" wehter I should fetch the next page or not while the user was scrolling down the list.


Also, while fetching the next page of the collection, I used to have as component of the last ListItem a Spinner control which I toggled its `showing` property whenever a new page was being requested. This Spinner was part of the last ListItem so the user could see it at the very bottom of the page.

The spinner was part of List's components block which which was actually describing a ListItem. I could create this spinner control only in the last ListItem by checking in List's onSetupItem callback if the index of the ListItem was pointing to the last object of my data-set. Then, I was setting the spinner.canGenerate to true while in any other case was false.

So my questions now are:

How the "paging" event currently works in enyo.Datalist? How can it get triggered while user is scrolling? There are few references about it and no examples. I tried to read the source code, but the newer additions in the framework are not easy to read for me.
How am I going to achieve this using bindingS?

How can I set a control's canGenerate by checking the index of the model parsed in the collection.

I hope someone will be able to help me in getting a deeper understanding of bindings at this point.

Comments

  • I've made a subkind of enyo.DataList to auto fetch on a collection:
    /**
    	_enyo.AutoFetchDataList_ expands enyo.DataList to automatically fetch new
    	records when the user is scrolled _fetchThreshold_ value.
    	_fetchThreshold_ value should be between 0.5 and 1;
    */
    enyo.kind({
    	name: "enyo.AutoFetchDataList",
    	kind: "enyo.DataList",
    	fetchThreshold: 0.9,
    	_last_fetch: 0,
    	didScroll: function (sender, event) {
    		this.inherited(arguments);
    		var maxTopVal = event.scrollBounds.maxTop,
                actualTop = event.scrollBounds.top;
    
            if (actualTop > (maxTopVal * this.fetchThreshold)) {
    			if (this.collection.get("length") != this._last_fetch) {
    				this._last_fetch = this.collection.get("length");
    				this.collection.fetch();
                }
            }
    		return true;
    	}
    });
    You can bind to collection.isFetching to toggle a spinner. It goes to true while a fetch is in progress, and when the fetch is complete, it goes to false.
  • Thank you for your quick response. This seems very helpfull and answers one of my questions. The question that arises again is how am I going to generate the spinner as part of the last ListItem only?
  • edited June 2014
    I just found a way to set canGenerate property on an elemenet of a list item.

    Here is some example code in case anyone will need it in the future.
    You actually don't need some specific property to bind on the element's `canGenerate` property. You need only the `binding` instance.

    {name: "datalist", kind: enyo.DataList, components: [ {components: [ {classes: "posts-wrapper", components: [ {name: "author", tag: "span"}, {name: "date", tag: "span"} ]}, { kind: onyx.Spinner, name: "moreSpinner", showing: false, classes: "list-more-spinner onyx-light"} ]} ], bindings: [ {from: ".model.author", to: ".$.author.content"}, {from: ".model.date", to: ".$.date.content"}, {from: ".model.euid", to: ".$.moreSpinner.canGenerate", transform: function(euid, refferer, binding) { var collection = this.container.collection; return collection.indexOf(binding.registeredSource) === collection.length - 1; } } ] } ]}
Sign In or Register to comment.