敲除虚拟滚动绑定 [英] knockout virtual scrolling binding

问题描述

KOGrid使用虚拟滚动来动态呈现内容.我正在寻找类似的东西，但更通用，因此可以用于ul列表，Bootstrap行等.我看到了一个叫做 giga-scroll 的东西，但我认为它已经消失了. Git已死.

KOGrid uses virtual scrolling to render content dynamically. I'm looking for something like that but more generic so it could be used for ul lists, Bootstrap rows, whatever. I saw something called giga-scroll, but I think it's gone now. The Git is dead.

有人通过虚拟滚动看到动态内容的自定义绑定吗?

Has anyone seen a custom binding for dynamic content via virtual scrolling?

推荐答案

不使用自定义绑定的简单解决方案:

提琴手示例: 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:

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 .

提琴手示例: http://jsfiddle.net/8x4vG/2/

像这样使用绑定:

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

视图模型如下所示:

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

这篇关于敲除虚拟滚动绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！