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>
<div data-role="page" id="Choose-Playlist">
    <div data-role="header">
        <h1>Choose Playlist</h1>
    </div>
  
    <div data-role="content" data-theme="c">    
      <div class='loadingIndicator' data-bind="visible: dataRows.loading()">Loading...</div>
    
      <ul id="PlayList" data-theme="c" data-role="listview" data-inset="true" data-bind="template: { name: 'template-PlayList', 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-PlayList" type="text/html">
  <!-- not ideal to data-bind to every li node - should use a more delegated approach as in spa example -->

  <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: selectMe, css: { selected: Selected() == true }">

      <div  class="ui-btn-inner">
      
        <a href="#" class="ui-link-inherit playlist-item"  >  
            <span data-bind="text: Name"></span><br>
            <span data-bind="text: AssessmentType" style="font-size:smaller;"></span>
            <span class="ui-li-count" data-bind="text: QuestionCount"></span>
        </a>
      
        <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>
          
      </div>
  </li>
</script>

<!--
<script>
  $("#PlayList").on("click", "li", function(event){
    console.log($(this).text() + ' was clicked');
  // now what ??
 ...

CSS

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

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

JavaScript

var playlistItem = function(data) {
  var self = this;
  
  self.Id = ko.observable(data.id);
  self.Name = ko.observable(data.name);
  self.AssessmentType = ko.observable(data.assessmentType);
  self.QuestionCount= ko.observable(data.questionCount);
  self.Selected = ko.observable(false);
  self.selectMe = function() {
    var opt = !self.Selected();
    self.Selected(opt);
    
    // maybe raise global event - eg delegated event & global notification perhaps
    console.log('selected event: ' + self.Name() + ' '+ self.Selected() + ' ' + self.Id());
  };

};


function getPlaylistItems() {
    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",  // organizationID
            //additional parameters sent to the remote service
            pageSize: params.limit,
            pageIndex: 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 playlistItem(item);
            });


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

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


};

ko.applyBindings(playlistViewModel);