insight rosterClass (wijmo-listview): press-to-load-more

(wijmo-listview, jquery mobile demo press-to-load-more for rosterClasses (d7.conveyclassrooms.com)

by jmucci

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>
<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-complete.all.3.0.0a1.min.css" rel="stylesheet" type="text/css" />
 
<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.0.0a1.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.3.0.0a1.min.js" type="text/javascript"></script>

<div data-role="page" id="Choose-RosterClass">
    <div data-role="header">
        <h1>Choose Roster (wijmo)</h1>
    </div>
  
    <div data-role="content" data-theme="c">    
      <div class='loadingIndicator' data-bind="visible: dataRows.loading()">Loading...</div>
    
        
        <!-- data-role="listview" -->
      <ul id="RosterClass" data-theme="c" data-role="wijlistview" data-inset="true" data-bind="template: { name: 'template-RosterClass', foreach: dataRows }">
      </ul>   

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


<script id="template-RosterClass" type="text/html">
  <!-- not ideal to data-bind to every li node - should use a more delegated approach as in spa example -->

  <!--
  // data-bind="click: selectMe, css: { selected: selected() == true }">
-->
  <li data-theme="c"
      class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-top ui-btn-up-c" 
               data-bind="click: toggleSelection, css: { selected: isSelected }">


      <div  class="ui-btn-inner">
      
        <a href="#"...

CSS

.RosterClass-item {
        font-size: .8em;
        line-height: 1em;
    }

#RosterClass li.selected
{
    background: #B8DC70;
 
}

JavaScript

var RosterClassItem = function(data) {
  var self = this;
  
  self.id = ko.observable(data.id);
  self.name = ko.observable(data.name);
  self.description = ko.observable(data.description);
  self.memberCount= ko.observable(data.memberCount);
  self.anonymous = ko.observable(data.anonymous);
  self.isSelected = ko.observable(false);
  self.toggleSelection = function() {
    var opt = !self.isSelected();
    self.isSelected(opt);
    
    // maybe raise global event - eg delegated event & global notification perhaps
    console.log('selected event: ' + self.name() + ' '+ self.isSelected() + ' ' + self.id());
  };

};


function getRosterClassItems() {
    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/GetRosterClasses",
        dataType: "jsonp",
        data: {
            id: "1431b2f2-cd32-42c3-956f-bc142e415e5a",  // teacherID
            //additional parameters sent to the remote service
            pageSize: params.limit,
            page: params.page //next page
        },
        context: this,
        success: function(result) {
            this.pager.totalCount(result.Count);
            var newData = result.Data;
            var orig = ko.utils.unwrapObservable(this()) || [];
            newItems = ko.utils.arrayMap(newData, function(item) {
                return new RosterClassItem(item);
            });


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

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