0

我正在尝试为这个“游戏视图”在我的木偶视图中添加一个无尽的滚动我确信我的逻辑在正确的轨道上，但我被告知我可能需要直接在 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 的链接...

抽搐电视 API

谢谢大家，很抱歉发了这么长的帖子。干杯。

4

1 回答 1

2

***没有通读所有代码，但是可以通过以下方式使用主干实现分页/无限滚动...

Backbone Paginator (Most popular): 
https://github.com/backbone-paginator/backbone.paginator 

Backbone Pageable (API was easier IMO)
https://github.com/wyuenho/backbone-pageable

我不确定您的收藏中需要多少项目，但我建议您使用一个按钮来获取更多项目，这样您就不会将所有内容加载到内存中。一次获取 10 -100 个。或者添加一个在滚动到底部时加载更多项目的事件。

之前我尝试用 Marionette 做同样的事情，但最终选择了 Elasticsearch 及其内置的长期分页。但与此同时，上述插件应该可以工作。

**编辑：此外，只要您使用 jquery 或 js 将结果附加到底部

于 2013-09-14T20:59:16.577 回答