दस्तक वर्चुअल स्क्रॉलिंग बाध्यकारी

Question

KOGrid गतिशील रूप से सामग्री प्रस्तुत करने के लिए वर्चुअल स्क्रॉलिंग का उपयोग करता है। मैं ऐसा कुछ ढूंढ रहा हूं लेकिन अधिक सामान्य है इसलिए इसका उपयोग ul सूचियों, बूटस्ट्रैप पंक्तियों, जो कुछ भी हो सकता है। मैंने giga-scroll नामक कुछ देखा, लेकिन मुझे लगता है कि यह अब चला गया है। गिट मर चुका है

क्या किसी ने वर्चुअल स्क्रॉलिंग के माध्यम से गतिशील सामग्री के लिए कस्टम बाध्यकारी देखा है?

Answer 1

एक कस्टम बाइंडिंग का उपयोग किए बिना एक सरल समाधान:

फ़िडलर उदाहरण: http://jsfiddle.net/adrienne/Y2WUN/

मार्कअप:

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

संपूर्ण ब्राउज़र विंडो को कस्टम बाध्यकारी स्क्रॉलिंग का उपयोग करके एक अलग समाधान:

http://figg-blog.tumblr.com/post/32733177516/infinite-scrolling-knocked-out।

फ़िडलर उदाहरण:

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

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

इस तरह एक दृश्य मॉडल की तलाश में कुछ के साथ

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

तो जैसे बंधन का प्रयोग करें

Answer 2

मैंने सोचा कि मैं कुछ अन्य scrollers मैं पाया है साझा करेंगे ...

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

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