web-dev-qa-db-ja.com

ノックアウト仮想スクロールバインディング

KOGridは、仮想スクロールを使用してコンテンツを動的にレンダリングします。私はそのようなものを探していますが、より一般的であるため、ulリスト、Bootstrap行などに使用できます。 giga-scroll）と呼ばれるものを見ました。 ですが、もうなくなったと思います。Gitは死んでいます。

仮想スクロールを介した動的コンテンツのカスタムバインディングを見た人はいますか？

knockout.jsscrolldynamic-content
21
Homer

カスタムバインディングを使用しない簡単なソリューション：

フィドラーの例： 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 。

フィドラーの例： 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
    }
  }
 }
32
Hallvar Helleseth

私が見つけた他のいくつかのスクローラーを共有しようと思いました...

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

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

5
Homer