Question

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

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

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

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

}）;

带有主干的无限卷轴js

1 个答案: