Skip to content

Instantly share code, notes, and snippets.

@wlike

wlike/listView.js

Forked from anthonychung/listView.js
Created April 12, 2014 07:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save wlike/10523381 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save wlike/10523381 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
readme.md

Lazy loading parts of a collection bound to an table view

Titanium alloy example.

Using the dataFilter function to lazy load parts of the collection that is bound to a tableView, adding 10 more at a time to be displayed. uses a single collection bound to tableView

The filterFunction calls collection.first(numberTableRowsDisplayed). This var numberTableRowsDisplayed is incremented when user gets to bottom of the table. Uses alloy widgets: nl.fokkezb.dynamicScrolling to increment the number of rows to be displayed and then trigger change on the collection, when user gets to the bottom of the TableView. nl.fokkezb.pullToRefresh to get more json data from web datasource.

Links: https://github.com/FokkeZB/nl.fokkezb.dynamicScrolling https://github.com/FokkeZB/nl.fokkezb.pullToRefresh

Raw
listView.js
var common = require('common');
var pullToRefresh, scrollCtrl;
var numberTableRowsDisplayed = 10;
var postsCollection = Alloy.Collections.post;
function filterFunction(collection) {
return collection.first(numberTableRowsDisplayed);
}
postsCollection.comparator = function(model) {
// the minus is important to reverse the order for the comparator, flip ascending descending.
return -model.get('date');
};
function loadMoreRows(_callback) {
numberTableRowsDisplayed = numberTableRowsDisplayed+10;
postsCollection.trigger('change');
if(OS_IOS) {
if (typeof(_callback) !== "undefined"){
Ti.API.info('about to finish load more rows');
_callback();
}
}
}
function refreshFeed(_callback) {
Ti.API.info('BEGINNING refresh feed');
common.getFacebookFeed(postsCollection);
common.getTwitterFeed(postsCollection);
common.getBlogFeed(postsCollection,"get_recent_posts");
postsCollection.trigger('change');
if(OS_IOS) {
if (typeof(_callback) !== "undefined"){
Ti.API.info('about to finish pull to refresh');
pullToRefresh.date = moment();
_callback();
}
}
}
function init(){
// init calls
if(OS_IOS) {
pullToRefresh = Alloy.createWidget("nl.fokkezb.pullToRefresh", null, {
table: $.postsTable,
backgroundColor: "#EEE",
fontColor: "#AAA",
indicator: "dark",
image: "/images/ptrArrow.png",
loader: refreshFeed,
msgUpdating: "Checking for new feeds"
});
scrollCtrl = Alloy.createWidget('nl.fokkezb.dynamicScrolling', null, {
table: $.postsTable,
loader: loadMoreRows
});
}
if(OS_IOS) {
refreshFeed();
}
}
init();
Raw
listView.xml
<Alloy>
<Collection src="post"/>
<Window id="window" class="container">
<TableView id="postsTable" dataCollection="post" dataTransform="transformFunction" dataFilter="filterFunction" onClick="rowClicked" >
<Require src="row"/>
</TableView>
</Window>
</Alloy>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment