無限滾動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與骨幹

回答

相關問題