无限滚动淘汰多个请求

infinite scroll knockout multiple requests

本文关键字：请求 淘汰 滚动 无限      更新时间：2023-09-26

我想在我的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)用于测试映射是否已完成

在这里我发现了一个漂亮的实现。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());
相关文章：