2

モーダルを持つ非常に基本的なバックボーン JS アプリケーションがあります。現在、ルーターはモーダルを次のように表示します。

class App.Routers.Router extends Backbone.Router
  routes:
    "modal" : "modal"

  modal: ->
    view = new App.Views.Modal.New()
    $('#shared').html(view.el)
    view.render()
    view.show()
    return

class App.Views.Sessions.New extends Backbone.View
  template: Handlebars.templates["backbone/templates/modals"]

  initialize: (options) ->
    super(options)

  render: ->
    $(@el).html(@template())
    $('.modal', @el).modal()
    $('.modal', @el).on 'hidden', @cleanup
    return @

  show: ->
    $('.modal', @el).modal('show')

  hide: ->
    $('.modal', @el).modal('hide')

  cleanup: ->
    # ?

これは問題なく動作しますが、ウィンドウの履歴と戻るボタンを選択したユーザーを処理する方法がわかりません (つまり、戻るをクリックしたときにモーダルを破棄する方法)。誰かが最善のアプローチについて何か考えを持っていますか? ありがとう。

4

1 に答える 1

4

シングル ページ アプリ (SPA) に関する興味深い問題に遭遇しました。はい、少しトリッキーになる可能性がありますが、単純なソフトウェア エンジニアリングの原則/設計がここで役立ちます。私は次の方法でクリーンアップに対処しました。

さまざまな「アプリケーションの部分」間のビュー遷移の管理を担当する別のクラス/オブジェクトを用意します。たとえば、私のアプリには次のようなものがあります。

var App = {};

//when showing a specific app:

App.showView = function(appToShow){
if(this.currentApp)
  currentApp.close();

this.currentApp = appToShow;
//render appToShow;
}

appToShowcreate/renderメソッドとを持つ「クラス」ですclose。アプリがクリーンアップを担当するようにします。

現在、メインアプリケーション内にモーダルまたは「サブアプリ」がある場合があります。上記の変形を使用して、オブジェクトにcloseメソッドを追加しました。Appただし、基本的な考え方は、これらの「サブ アプリ」をメイン アプリのプロパティとして追加することです。

//when creating modal:
App.addModal = function(modal){
 this.currentApp.modal = modal;
}

戻るボタンをクリックするか、アプリの別の部分に移動する場合、App-manager を呼び出してクリーンアップと遷移を処理する必要があります。基本的には次のように言います。

App.closeModal = function(modal){
 if(this.currentApp.modal)
  this.currentApp.modal.close();
}

ルーターの編成方法に応じて、アプリ全体を完全に閉じるか、モーダル/サブアプリだけを閉じるかを決定できるはずです。基本的に、「App Manager」は、ビュー間の遷移の処理のみを担当する別のオブジェクトであり、そうである必要はありませんBackbone.View。別のオブジェクトでも問題なく機能します。イベント アグリゲーターを作成することで、Backbone のイベントを使用してイベントをリッスンすることもできます。Derick Bailey は、同じことを詳述した優れたブログ投稿を書いています。

于 2012-09-09T18:19:18.960 に答える