2

これら 2 つのイベントに対して異なる応答をする Backbone.js ルーターを実装するための適切なパターンはありますか。

  • ダイレクト ナビゲーション- ユーザーは、URL をブラウザに直接入力するか、アプリケーションでRouter.navigate()
  • ブラウザの「戻る」ボタン - ユーザーは「戻る」ボタンを押して、以前表示していたページに移動します。

私が尋ねる理由は、ユーザーが「戻る」ボタンを押した結果としてルーターが呼び出された場合、$('element_id').html(view.el)データをモデルにリロードして再レンダリングせずに、古いビューをその要素に戻したいからです。景色。

ユーザーがブラウザーに URL を入力するか、リンクをクリックするか、アプリケーション内から Router.navigate() を呼び出してページに直接移動した結果としてルーターが呼び出された場合、ルーターに指示してもらいたいモデルがデータを再リクエストし、ビューの再レンダリングをトリガーします。

ヘルプや提案をいただければ幸いです。どうもありがとうございました。

4

1 に答える 1

2

私はしばらく前に同様の問題に直面しました。これはあなたが望むもの以上かもしれませんが、私が見つけたものは次のとおりです。

ダイレクトナビゲーション

直接ナビゲーションの場合、通常の流れは次のようになります。

  • アプリの初期化: ほとんどの backbone.js プロジェクトには、アプリを初期化するコード (App.init) が含まれています。多くの例では、コレクション (todos など) の JSON を実際の HTML に挿入していますが、個人的には、このコードをページの読み込み後にコレクションを取得する機会として使用するのが好きです (coffeescript):

    window.App =
  ...
  init: ->
    @todos = new App.Todos()
    @todos.deferred = @todos.fetch()

    @threads.deferred.done ->
      App.appRouter = new App.AppRouter(collection: self.todos)
      ...

    (jQuery の deferred の使用は、実際にページをレンダリングする前にコレクションがフェッチされることを確認することです。)

  • ルーターの初期化: ここで、要素をルーターに割り当て、コレクションをルーターに割り当てる機会が得られます (私は、ソートボットのbackbone-supportの「SwappingRouter」を使用しています。これを確認することを強くお勧めします)。

    App.Router = Support.SwappingRouter.extend
...
  initialize: (options) ->
    @el = $('.content')
    @collection = options.collection

  • ルート ハンドラーを実行します。これが最後のステップです。この時点で、コレクションは既に初期化されており、ルーターにはコレクションへのポインターがあるため、ビューを作成してレンダリングするだけです。

      show: (id) ->
    view = new App.TodosView(model: @collection.get(id))
    @swap(view)

    (Swap はビューをレンダリングし、クリーンアップのために他のいくつかのことを行います。)

ブラウザの戻るボタン

この場合、App.init も AppRouter.initialize も呼び出されないため、デフォルトではコレクションは再ロードされません。バックボーンは前のルートで自動的にナビゲートを呼び出すため、ルート ハンドラーの内容によっては、ビューが再レンダリングされる場合があります。上記の例では、(swap calls render) になりますが、これを回避できます。

ここで、常にバックボーンに伴う重要な問題は、ステートレス (HTTP) プロトコルとステートフル (リッチ クライアント側アプリ) 環境を同時に使用していることです。2 つを並べてうまく連携させるのは、かなり難しい場合があります。

于 2012-07-19T05:03:36.827 に答える