带骨干的无限滚动js

Infinite scroll js with backbone

本文关键字：滚动 js 无限      更新时间：2023-09-26

我已经连续3天遇到这个问题了，我一直在尝试使用https://github.com/paulirish/infinite-scroll在我的主干项目中滚动。

我试图用搜索引擎找到我的问题的答案，但没能找到。我是backbone.js的初学者。

项目列表视图：

var ItemList = Backbone.View.extend({
    initialize: function() {
    },
    render: function(){
        this.$el.empty();
        this.collection.each(function(_itemData){
            var itemList = new ItemView({model : _itemData});
            this.$el.append(itemList.el);
        },this);
    }
});

项目列表视图：

render: function(){
   var _itemList = _.template(ItemListTem);
   this.$el.html(_itemList);
   var _itemObj = _item.getItemSearches(this.options.key);
   var itemColletion = new ItemCollection(_itemObj);
   var itemListView = new ItemList({collection : itemColletion, el : '.itemListContainer'});
   itemListView.render();
});

项目集合：

var itemCollection = Backbone.Collection.extend({
    model : itemModel,
    url : RootWebsite
});

我将项目列表和项目模板划分为不同的html文件。

项目列表模板：

<div class="itemListContainer"></div>
<script>
  $(document).ready(function(){
    $('#appendItem').infinitescroll({
        navSelector     : "#next:last",
        nextSelector    : "a#next:last",
        itemSelector    : "#appendItem p",
        debug        : true,
        loadingImg   : "/img/loading.gif",
        loadingText  : "Loading new posts...",
        animate      : true,
        donetext     : "I think we've hit the end" ,
        appendCallback  : false,
        path: ["http://localhost/Website/#itemlist"]
    }, function(json, opts) {
        var page = opts.state.currPage;
    });
  });
</script>

项目模板：

<div class="itemTemplate">
       <!-- item elements in here -->
</div>

集合中有数百个项目，所以我想将滚动插件集成到我的项目列表中。

console.log(opts.state.currPage)增加页码1,2,3…当滚动到窗口的角落时，它对我的视图列表没有任何影响。

我想知道，我是否必须在集合中添加其他内容，或者滚动如何将完整的数据分割成小块。

如果我有点笨，我很抱歉！欢迎回答您的问题，并感谢您对我的问题提供的任何帮助！

此时itemView.render（）将渲染所有内容。使其接受索引参数，并拼接集合

render: function(index){
    //this.$el.empty();
    var loadElements = index * 10;
    _(this.collection.models.splice(loadElements, loadElements+10)).each(function(_itemData){
        var itemList = new ItemView({model : _itemData});
        this.$el.append(itemList.el);
    },this);
}

那么你的插件应该调用render

}, function(json, opts) {
    var page = opts.state.currPage;
    listView.render(page-1) // you mentioned that it starts from 1
});

})；

相关文章：