この「Games View」のマリオネット ビューにエンドレス スクロールを追加しようとしています。私のロジックは正しい軌道に乗っていると確信していますが、jQuery で何かを直接変更する必要があるかもしれないと言われました。複合ビューで「無限スクロール」を使用する..それらにはいくつかの癖があるかもしれません。
ここにいくつかのコードがあります。
getGames: (url, params = {}) ->
_.defaults params,
oauth_token: msgBus.reqres.request "get:current:token"
#country: "us"
games = new GamesCollection
games.url = "https://api.twitch.tv/kraken/#{url}?callback=?"
games.fetch
reset: if params.offset is 0 then true else false
data: params
games
msgBus.reqres.setHandler "games:top:entities", ->
API.getGames "games/top",
limit: 25
offset: 0
Msgbus 呼び出し。
msgBus.reqres.setHandler "games:scroll", (page) ->
API.getGames "games/top",
limit: 25
offset: page
msgBus.reqres.setHandler "games:top:entities", ->
API.getGames "games/top",
limit: 25
offset: 0
ゲームコントローラー
gameRegion: (collection) ->
view = @getGameView collection
@listenTo view, "childview:game:item:clicked", (child, args) -> # listen to events from itemview (we've overridden the eventnamePrefix to childview)
console.log "game:item:clicked" , args.model
Backbone.history.navigate "games/streaming/#{args.model.get("game").name}", trigger:false
msgBus.commands.execute "app:stream:list", @layout.streamRegion, args.model
@listenTo view, "games:fetchmore", (page) ->
#console.log "game:item:clicked" , args.model
msgBus.reqres.request "games:scroll", page
そして最後に、ゲームビュー
define ['apps/games/list/templates', 'views/_base', 'msgbus'], (Templates, AppView, msgBus) ->
class GameItem extends AppView.ItemView
template: _.template(Templates.gameitem)
tagName: "li"
className: "col-lg-3 col-md-4 col-sm-6 col-xs-12"
triggers:
"click" : "game:item:clicked"
TopGameList: class TopGameList extends AppView.CompositeView
template: _.template(Templates.topgame)
itemView: GameItem
itemViewContainer: "#gameitems"
events:
'scroll': 'checkScroll'
checkScroll: (e) ->
console.log "scroll", e
triggerPoint = 100 #100px from the bottom
if @el.scrollTop + @el.clientHeight + triggerPoint > @el.scrollHeight
console.log "trigger:scroll"
@collection.offset += 1 #Load next page
msgBus.events.trigger "games:fetchmore", @collection.offset
私が使用している API に興味がある場合は、ここに github へのリンクがあります...
みんなありがとう、長い投稿でごめんなさい。乾杯。