14

私はbackbone.jsをいじくり回していて、モデル/コレクションの「エンドレススクロール」状況を作成するためのより簡潔なソリューションが、私が見てきたモジュールよりもあるかどうか疑問に思っています（jqueryにはいくつかあります。おそらく他のライブラリについてはもっと）。

一部の検索はほとんど何も起こらなかったので、バックボーンを使用して独自のソリューションを構築する前に、バックボーンコレクションの外部で構築する必要があるのか​​、誰かが同様のことを試みたのかを尋ねると思いました。

4

6 に答える 6

10

このブログ投稿は最近私のツイッターストリームに上陸しました。非常に優れたソリューションのように見え、メインページでうまく機能します。ブログから、このソリューションの利点は次のとおりです。

  1. 戻るボタンを保持します。
  2. Twitterのエンジニアがどれほど満足していても、ハッシュバンは使用しません。
  3. （1）が不可能な場合、無限スクロールをあきらめます。
  4. プログレッシブエンハンスメント：（3）が発生すると、ユーザーはより多くのコンテンツのために古き良きハイパーリンクをたどります。
于 2011-05-23T20:17:34.747 に答える
4

これを自分で調べているときに、他に2つのリソースを見つけました。

  1. https://github.com/joneath/infiniScroll.js
  2. http://addyosmani.com/blog/backbone-paginator-new-pagination-components-for-backbone-js/
于 2012-04-10T01:42:37.983 に答える
1

SlickGridを試したことがない場合は、オプションになる可能性があります：https ://github.com/mleibman/SlickGrid/wiki/Examples

于 2011-05-23T21:50:48.310 に答える
0

バックボーンとjQueryウェイポイントを使用した別のソリューション：https ：//gist.github.com/davidmontoyago/6336612

于 2013-08-30T14:37:09.887 に答える
0

次の拡張機能が機能するはずです： https ：//github.com/joneath/infiniScroll.js

これらは、 データを部分的にロードする場合にも役立つ場合があります：http: //backplug.io/plugin/Backbone.actAs.Paginatable、https ： //github.com/wyuenho/backbone-pageable、https：//github.com/backbone- paginator/backbone.paginator。

私はここでバックボーン拡張機能を検索することを好みます：http：//backplug.io。

于 2013-08-30T16:44:55.317 に答える
-1

別の繰り返しの答え：これがBackbone.Collectionの私の拡張です：

_.extend Backbone.Collection.prototype,
  options:
    infinitescroll:
      success: $.noop
      error: $.noop
      bufferPx: 40
      scrollPx: 150
      page:
        current: 0
        per: null
      state:
          isDuringAjax: false
          isDone: false
          isInvalid: false
      loading:
        wrapper: 'backbone-infinitescroll-wrapper'
        loadingId: 'backbone-infinitescroll-loading'
        loadingImg: 'loading.gif'
        loadingMsg: '<em>Loading ...</em>'
        finishedMsg: '<em>No more</em>'
        msg: null
        speed: 'fast'

  infinitescroll: (options={})->
    # NOTE: coffeescript cannot deal with nested scope!
    that = @

    _.extend(@options.infinitescroll, options.infinitescroll) if options.infinitescroll

    infinitescroll_options = @options.infinitescroll

    # where we want to place the load message in?
    infinitescroll_options.loading.wrapper = $(infinitescroll_options.loading.wrapper)
    if !infinitescroll_options.loading.msg and infinitescroll_options.loading.wrapper.size() > 0
      infinitescroll_options.loading.msg = $('<div/>', {
        id: infinitescroll_options.loading.loadingId
      }).html('<img alt="'+$(infinitescroll_options.loading.loadingMsg).text()+'" src="' + infinitescroll_options.loading.loadingImg + '" /><div>' + infinitescroll_options.loading.loadingMsg + '</div>')
      infinitescroll_options.loading.msg.appendTo(infinitescroll_options.loading.wrapper).hide()
    else
      infinitescroll_options.loading.msg = null

    fetch_options = _.omit(options, 'infinitescroll')
    infinitescroll_fetch = ()=>
      # mark the XHR request
      infinitescroll_options.state.isDuringAjax = true

      # increase page count
      infinitescroll_options.page.current++

      payload = {
        page: infinitescroll_options.page.current
      }
      payload['limit'] = infinitescroll_options.page.per if infinitescroll_options.page.per isnt null

      _.extend(fetch_options, {
        remove: false
        data: payload
      })

      if infinitescroll_options.loading.msg
        # preload loading.loadingImg
        (new Image()).src = infinitescroll_options.loading.loadingImg if infinitescroll_options.loading.loadingImg

        infinitescroll_options.loading.msg.fadeIn infinitescroll_options.loading.speed, ()->
          that.fetch(fetch_options)
          .success (data, state, jqXHR)=>
            infinitescroll_options.state.isDuringAjax = false
            infinitescroll_options.state.isDone = true if _.size(data) is 0

            infinitescroll_options.loading.msg.fadeOut infinitescroll_options.loading.speed, ()->
              infinitescroll_options.success.call(data, state, jqXHR) if _.isFunction(infinitescroll_options.success)
              return
            return
          .error (data, state, jqXHR)=>
            infinitescroll_options.state.isDuringAjax = false
            infinitescroll_options.state.isInvalid = true

            infinitescroll_options.loading.msg.fadeOut infinitescroll_options.loading.speed, ()->
              infinitescroll_options.error.call(data, state, jqXHR) if _.isFunction(infinitescroll_options.error)
              return
            return
          return

      else
        that.fetch(fetch_options)
        .success (data, state, jqXHR)=>
          infinitescroll_options.state.isDuringAjax = false
          infinitescroll_options.state.isDone = true if _.size(data) is 0

          infinitescroll_options.success.call(data, state, jqXHR) if _.isFunction(infinitescroll_options.success)
          return

        .error (data, state, jqXHR)=>
          infinitescroll_options.state.isDuringAjax = false
          infinitescroll_options.state.isInvalid = true

          infinitescroll_options.error.call(data, state, jqXHR) if _.isFunction(infinitescroll_options.error)
          return
      return

    $(document).scroll ()->
      $doc = $(document)
      isNearBottom = ()->
        bottomPx = 0 + $doc.height() - $doc.scrollTop() - $(window).height()

        # if distance remaining in the scroll (including buffer) is less than expected?
        (bottomPx - infinitescroll_options.bufferPx) < infinitescroll_options.scrollPx

      return if infinitescroll_options.state.isDuringAjax || infinitescroll_options.state.isDone || infinitescroll_options.state.isInvalid || !isNearBottom()

      infinitescroll_fetch()
      return


    infinitescroll_fetch()
    return

https://gist.github.com/mcspring/7655861

于 2013-11-26T10:08:00.393 に答える