0

HTML ページで無限スクロールを使用したいと思います。サーバーの回答が複数ある理由がわかりません...

$(window).data('jsonpready', true).scroll(function (e) {
     if ($(window).data('jsonpready') == false) return;

     if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
         // $('div#loadmoreajaxloader').show();
         $(window).data('jsonpready', false);
         viewModel.ui.FlashbackReport.MoreContacts();
         console.info("data loading");
         if (viewModel.ui.dataAvailable) {
             $(window).data('jsonpready', true);
         }

     }
 });

後でマッピング関数を呼び出すサーバー要求の関数:viewModel.ui.FlashbackReport.MoreContacts();

if(viewModel.ui.dataAvailable) マッピングが終了したかどうかをテストする

4

1 に答える 1

0

ここで、これの美しい実装を見つけました。http://jsfiddle.net/8x4vG/2/

    ko.bindingHandlers.scroll = {

  updating: true,

  init: function(element, valueAccessor, allBindingsAccessor) {
      var self = this
      self.updating = true;
      ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $(window).off("scroll.ko.scrollHandler")
            self.updating = false
      });
  },

  update: function(element, valueAccessor, allBindingsAccessor){
    var props = allBindingsAccessor().scrollOptions
    var offset = props.offset ? props.offset : "0"
    var loadFunc = props.loadFunc
    var load = ko.utils.unwrapObservable(valueAccessor());
    var self = this;

    if(load){
      element.style.display = "";
      $(window).on("scroll.ko.scrollHandler", function(){
        if(($(document).height() - offset <= $(window).height() + $(window).scrollTop())){
          if(self.updating){
            loadFunc()
            self.updating = false;
          }
        }
        else{
          self.updating = true;
        }
      });
    }
    else{
        element.style.display = "none";
        $(window).off("scroll.ko.scrollHandler")
        self.updating = false
    }
  }
 }

var viewModel = function(){            
this.collection = ko.observableArray([]) 
var disney = ["Mickey", "Donald", "Daffy", "Hewie", "Dewie", "Lewie"]
var self = this;
this.addSome = function(){ 

    for(var i = 0; i < 40; i++){
    self.collection.push(disney[Math.floor((Math.random()*6))]) 
        }
}

this.addSome()

}


ko.applyBindings(new viewModel());
于 2013-07-26T13:15:24.983 に答える