Question

我想在这个“游戏视图”中添加一个无尽的滚动到我的牵线木偶视图我确信我的逻辑是在正确的轨道上，但有人告诉我，我可能需要在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

谢谢你们，对不起这篇长篇文章感到抱歉。欢呼声。

Answer 1

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

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将结果附加到底部

木偶的无尽滚动？

1 个答案: