0

この「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 へのリンクがあります...

Twitch TV API

みんなありがとう、長い投稿でごめんなさい。乾杯。

4

1 に答える 1