Paging widget [qx]

gistfile1.js

qx.Class.define("View", {
  extend : qx.ui.core.Widget,
  
  construct : function() {
    this.base(arguments);
    this._setLayout(new qx.ui.layout.VBox());
    
    for (var i = 0; i < 10; i++) {
      this._add(new qx.ui.form.ListItem());
    }
  }
});

qx.Class.define("Controller", {
  extend : qx.core.Object,
  
  properties : {
    model : {
      event : "changeModel",
      apply : "_apply",
      nullable: true
    },
    
    target : {
      event : "changeTarget",
      apply : "_apply",
      nullable: true
    },
    
    
    page : {
      init : 0,
      apply: "_applyPage"
    }
  },
  
  members : {
    __bindingIds: [],
    
    
    _apply : function() {
      if (!this.getModel() || !this.getTarget()) {
        return; 
      }
      
      this.__setUpBindings(0);
    },
    
    __setUpBindings : function(start) {
      for (var i = 0; i < this.__bindingIds.length; i++) {
        this.removeBinding(this.__bindingIds[i]);
      }
      this.__bindingIds = [];
      
      var children = this.getTarget()._getChildren();
      for (var i = start; i < start + children.length; i++) {
        console.log(i);
        var id = this.bind("model[" + i + "]", children[i - start], "label");
        this.__bindingIds.push(id);
      }
    },
    
    _applyPage : function(value) {
      if (!this.getTarget()) {
        return;
      }
      var start = value * this.getTarget()._getChildren().length;
      this.__setUpBindings(start);
    }
  }
});

var data = [];
for (var i = 0; i < 100; i++) {
  data.push("affe " + i);
}
model = qx.data.marshal.Json.createModel(data);

var view = new View();
this.getRoot().add(view);

c = new Controller();
c.setTarget(view);
c.setModel(model);