Javascript 带主干的无限滚动js

我已经连续3天被这个问题困扰，我一直在尝试使用 在我的主干项目中进行滚动

我试图用搜索引擎找到我问题的答案，但没能找到。我是一名初级开发人员，拥有

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>

$（文档）.ready（函数（）{
$（'#appendItem'）。无限滚动({
导航选择器：“#下一步：最后一步”，
下一个选择器：“a#下一个：最后一个”，
项目选择器：“#附录项目p”，
是的，
加载img:“/img/loading.gif”，
加载文本：“加载新帖子…”，
动画：对，
donetext：“我想我们已经走到尽头了”，
A:错，
路径：[”http://localhost/Website/#itemlist"]
}，函数（json，opts）{
var page=opts.state.currPage；
});
});

项目模板：

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

}))