Knockout.js 剔除虚拟滚动绑定

KOGrid使用虚拟滚动动态呈现内容。我正在寻找类似的东西，但更通用，因此它可以用于

ul

列表、引导行等等。我看到一个叫做的东西，但我想它现在不见了。这家伙死了

---

有人见过通过虚拟滚动为动态内容定制的绑定吗

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

小提琴手示例：

标记：

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

视图模型：

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

var viewModel={
项目：ko.observableArray（[]），
滚动：功能（数据、事件）{
var elem=event.target；
如果（elem.scrollTop>（elem.scrollHeight-elem.offsetHeight-200））{
项目（20）；
}
},
maxId:0，
待处理请求：可观察到（错误）
};
函数getItems（cnt）{
如果（！viewModel.pendingRequest（））{
//创建假数据以传递给echo服务
var分录=[]；
对于（变量i=0；i

使用自定义绑定滚动整个浏览器窗口的不同解决方案：

小提琴手示例：

像这样使用绑定：

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

var viewModel=function（）{
this.collection=ko.observearray（[]）
var disney=[“米奇”、“唐纳德”、“达菲”、“休伊”、“杜威”、“路易”]
var self=这个；
this.addSome=函数（）{
对于（变量i=0；i<40；i++）{
self.collection.push（disney[Math.floor（（Math.random（）*6）））
}
}
这个。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
    }
  }
 }

ko.bindingHandlers.scroll={
更新:对,，
init:function（元素、valueAccessor、allBindingsAccessor）{
var self=这个
self.update=true；
ko.utils.domNodeDisposal.addDisposeCallback（元素，函数（）{
$（窗口）.off（“scroll.ko.scrollHandler”）
self.updateing=false
});
},
更新：函数（元素、valueAccessor、allBindingsAccessor）{
var props=allBindingsAccessor（）.scrollOptions
var offset=props.offset？props.offset：“0”
var loadFunc=props.loadFunc
var load=ko.utils.unwrapobbservable（valueAccessor（））；
var self=这个；
如果（加载）{
element.style.display=“”；
$（window）.on（“scroll.ko.scrollHandler”，function（）{
如果（$（document）.height（）-offset我想我会和大家分享我找到的一些其他滚动条


你说的虚拟滚动是什么意思？我也看到过它被称为无限滚动。用户滚动到滚动条的底部，然后在页面中动态插入更多的项目，以便用户可以继续向下滚动。我一直在做一些事情，但在自定义绑定中实现它应该不会那么困难。wo您想共享uld吗？它还不完整，但您希望将什么样的数据传递到绑定？您基本上需要做两件主要的事情。显示数据数组的子集（这可以作为observableArray的计算可观测数据来处理）。第二部分涉及处理正在滚动的元素上的滚动事件，以及检测/处理滚动区域的底部。这正是我要找的。谢谢分享！