Wirtualne przewijanie przewijania nokautowego

Question

KOGrid wykorzystuje wirtualne przewijanie do dynamicznego renderowania treści. Szukam czegoś podobnego, ale bardziej ogólny, aby mógł być używany do list ul, wierszy Bootstrap, cokolwiek. Zobaczyłem coś o nazwie giga-scroll, ale myślę, że już go nie ma. Git nie żyje.

Czy ktoś widział niestandardowe powiązanie dynamicznej zawartości za pomocą wirtualnego przewijania?

Answer 1

Proste rozwiązanie bez użycia zwyczaj wiązania:

Fiddler Przykład: http://jsfiddle.net/adrienne/Y2WUN/

Znacznik:

<div> 
    <span data-bind="text: items().length"></span> 
    <img src="http://rniemeyer.github.com/KnockMeOut/Images/loading.gif" data-bind="visible: pendingRequest" /> 
</div> 
<div id="main" data-bind="foreach: items, event: { scroll: scrolled }"> 
    <div data-bind="text: name"></div> 
</div> 

ViewModel:

var viewModel = { 
    items: ko.observableArray([]), 
    scrolled: function(data, event) { 
     var elem = event.target; 
     if (elem.scrollTop > (elem.scrollHeight - elem.offsetHeight - 200)) { 
      getItems(20); 
     } 
    }, 
    maxId: 0, 
    pendingRequest: ko.observable(false) 
}; 


function getItems(cnt) { 
    if (!viewModel.pendingRequest()) { 
     //create fake data to pass to echo service 
     var entries = []; 
     for (var i = 0; i < cnt; i++) { 
      var id = viewModel.maxId++; 
      entries.push({ 
       id: id, 
       name: "Name" + id 
      }); 
     } 

     viewModel.pendingRequest(true); 

     $.ajax({ 
      type: 'POST', 
      url: '/echo/json/', 
      data: { 
       json: ko.toJSON(entries), 
       delay: .1 
      }, 
      success: function(entries) { 
       ko.utils.arrayForEach(entries, function(entry) { 
        viewModel.items.push(entry); 
       }); 
       viewModel.pendingRequest(false); 
      }, 
      error: function() { 
       viewModel.pendingRequest(false); 
      }, 
      dataType: 'json' 
     }); 
    } 
} 

ko.applyBindings(viewModel); 

getItems(20); 

Inne rozwiązanie wykorzystujące niestandardowe powiązanie przewijane w całym oknie przeglądarki:

http://figg-blog.tumblr.com/post/32733177516/infinite-scrolling-knocked-out. Przykładem

Skrzypek: http://jsfiddle.net/8x4vG/2/

pomocą wiązania tak:

<div data-bind="foreach: collection"> 
    <div> 
    <span data-bind="text: $index()"></span> 
    <span data-bind="text: $data"></span> 
    </div> 
</div> 
<div data-bind="scroll: collection().length < 160, scrollOptions: { loadFunc: addSome, offset: 10 }">loading</div> 

z widokiem modelu patrząc coś takiego:

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(); 
} 

Realizacja wiązania:

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 
    } 
    } 
} 

Answer 2

myślałem, że chciałbym podzielić się kilka innych przewijacze znalazłem ...

https://github.com/thinkloop/knockout-js-progressive-filter

https://github.com/thinkloop/knockout-js-infinite-scroll