insight playlist (jquery-Mobile): press-to-load-more

jquery mobile demo press-to-load-more for playlists (d7.conveyclassrooms.com)

by jwstott

HTML

<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.0.js"></script>
<script src="https://raw.github.com/CraigCav/ko.datasource/master/ko.datasource.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Load Mor</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head>
<body>
    <div data-role="page">
    <div data-role="header">
        <h1>Twitter Sample</h1>
    </div>
<div data-role="content" data-theme="c">    
    <div class='loadingIndicator' data-bind="visible: dataRows.loading()">Loading...</div>
    
  <ul id="tweetList" data-theme="c" data-role="listview"  data-inset="true" data-bind="template: { name: 'load-more-template', foreach: dataRows }">
    </ul>   

<a href="#" data-role="button" data-theme="e"  data-inline="true" data-bind="click: dataRows.pager.next, visible: dataRows.pager.page() < dataRows.pager.totalPages()" data-icon="forward">Load More</a> 
   
    </div><!-- /content -->
    
</div>

<script id="load-more-template" type="text/html">
    <li data-theme="c">
       
            <span data-bind="text: Name"></span>
            <span data-bind="text: AssessmentType"></span>
            <span class="ui-li-count ui-btn-up-c ui-btn-corner-all" data-bind="text: QuestionCount"></span>
       
    </li>
</script>
    

    
</body>
</html>

CSS

.tweet {
        font-size: .8em;
        line-height: 1.4em;
    }
    .pullImage {
        width: 64px;
        height: 64px;
        border-radius: 3px;
        float: left;
        margin-right: 10px;
    }
    .sublink {
        font-size: .9em;
        font-weight: normal;
        display: inline-block;
        padding: 3px 3px 0 0;
        text-decoration: none;
        opacity: .8;
    }

JavaScript

var tweet = function(data) {
    return {
        Name: ko.observable(data.Name),
        AssessmentType: ko.observable(data.AssessmentType),
        QuestionCount: ko.observable(data.QuestionCount)

    };
};

function getTweets() {
    var params = {
        limit: this.pager.limit(),
        startIndex: this.pager.limit() * (this.pager.page() - 1),
        page: this.pager.page()
    };

    $.ajax({
        url: "http://d7.conveyclassrooms.com/api/engage/GetPlaylists",
        dataType: "jsonp",
        data: {
            id: "CCDA27BA-9028-40FB-865E-09BF0163C2D1",
            //additional parameters sent to the remote service
            pageSize: params.limit,
            page: params.page //next page
        },
        context: this,
        success: function(result) {
            var data = result.Data,
                orig = ko.utils.unwrapObservable(this()) || [];
            newItems = ko.utils.arrayMap(data, function(item) {
                return new tweet(item);
            });
            this.pager.totalCount(result.Count);

            orig.push.apply(orig, newItems)
            //this().push.apply(this(),newItems);
            this(orig);
            //this.apply(this, newItems);
          $('#tweetList').listview('refresh');
        },
        error: function(e) {
            console.log(e);
        }
    });
};
//Create ViewModel
var viewModel = {

    dataRows: ko.observableArray([]).extend({
        datasource: getTweets,
        pager: {
            limit: 5
        }
    })

};


ko.applyBindings(viewModel);