带骨干的无限滚动js答案

【问题标题】：Infinite scroll js with backbone带骨干的无限滚动js
【发布时间】：2014-10-10 07:52:47
【问题描述】：

我连续 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...当滚动到窗口的角落并且它对我的视图列表没有任何影响。

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

对不起，如果我有点菜鸟！欢迎提出您的问题，感谢您对我的问题提供的任何帮助！

【问题讨论】：

标签： javascript jquery backbone.js infinite-scroll

【解决方案1】：

此刻，您 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
});

});

【讨论】：