无限滚动js与骨干

我连续3天被这个问题困住，我一直试图使用 https://github.com/paulirish/infinite-scroll来滚动我的骨干项目。无限滚动js与骨干

我试图找到我的问题与搜索引擎的答案，但我无法。我是一名初学者开发人员，他的电话号码是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 ...当滚动到达窗口的角落，它对我的视图列表没有任何影响。

我想知道，是否需要为集合添加其他内容，或者滚动条如何将完整数据分成小块。

对不起，如果我有点小白菜！欢迎您提问并感谢您提供给我的任何帮助！

来源

2014-10-10 Nothing

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

那么你的插件应该调用渲染

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

}）;

来源

2014-10-11 21:29:10 n0mercy

无限滚动js与骨干

回答

相关问题