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

Revisions

  1. @anthonychung anthonychung revised this gist Mar 1, 2013. 1 changed file with 16 additions and 0 deletions.
    16 changes: 16 additions & 0 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    # 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
  2. @anthonychung anthonychung created this gist Mar 1, 2013.
    74 changes: 74 additions & 0 deletions listView.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,74 @@
    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();
    10 changes: 10 additions & 0 deletions listView.xml
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    <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>