dxScrollable

by Bacher

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/4466180/dx.all.debug.js"></script>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/4466180/dx.common.css">
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/4466180/dx.android.holo-dark.css">
<div class="container dx-viewport dx-theme-android dx-theme-android-typography dx-scrollable dx-scrollable-customizable-scrollbars">
    
    <div id="content" class="content" data-bind="dxScrollView: { pullDownAction: pullDown, reachBottomAction: scrollBottom }">
        <div style="background-color: red; width: 50%; height: 50%;">
        
        </div>
    </div>
    
    <div data-bind="dxButton: { text: 'Toggle PullDown', clickAction: togglePullDown }"></div>
    
</div>

CSS

p {
    padding: 5px 10px;
    margin: 0;
}

.content {
    height: 600px; 
    border: 1px solid #AAA;
}

JavaScript

function pullDownHandler(args) {
    var scrollView = args.actionValue;
    generateContent(scrollView);
}

function scrollBottomHandler(args) {
    var scrollView = args.actionValue;
    console.log("It's time to load some data");
    scrollView.release();
}

function generateContent(scrollView) {
    var content = scrollView.content();
    
    $.get("http://json-lipsum.appspot.com/?start=no&amount=" + (30 + Math.ceil(Math.random() * 10)), {},
          function(result) {
              content.empty();
              
              $.each(result.lipsum, function() {
                  $("<p />")
                  .text(this)
                  .appendTo(content);
              });
              
              scrollView.release();
          }, "jsonp");
}

$(function() {
    debugger;
    DevExpress.ui.initViewport({ allowZoom: false, allowPan: false });
    
    var vm = {
        pullDown: ko.observable(pullDownHandler),
        scrollBottom: ko.observable(scrollBottomHandler),
        togglePullDown: function() {
            vm.pullDown(vm.pullDown() ? null : pullDownHandler);
        }
    };
    
    ko.applyBindings(vm);
    
    generateContent($("#content").data("dxScrollView"));
});