簡體   English   中英

無限滾動敲除多個請求

[英]infinite scroll knockout multiple requests

我想在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());

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM