2

#contentテンプレートを動的に表示する代わりに、最初にモーダル ダイアログを表示し、次にテンプレートを表示したいと思います。選択したテンプレートを自動的に含むモーダルを表示するコードはどこにあるべきですか? この後、キャンセル後にモーダルクラスを閉じて削除するにはどうすればよいですか? これは現在のコードです: git . バックボーンを学んでいるのですが、正しいパターンがわかりません。

セッション ルーター:

($, Backbone, App, Session, Layout, AlertQueue) ->
  class App.Routers.SessionsRouter extends Backbone.Router
    initialize: (options) ->
      @user  = options.user
      @token = options.token
      @session = new Session(@user)
      @user.on('change', =>
        @session = new Session(@user)
        @token.fetch()
      )

    routes:
      "signup":               "newRegistration"
      "signin":               "newSession"

    newRegistration: ->
      View = require 'views/registrations/new_view'
      Model = require 'models/registration'
      @view = new View(model: new Model(), user: @user)
      # Layout.setContent(@view)
      # Dialog.show(@view)??

    newSession: ->
      View = require 'views/sessions/new_view'
      @view = new View(model: @session, user: @user, token: @token)
      # Layout.setContent(@view)

レイアウト ヘルパーは、コンテンツを静的コンテナーに表示するようになりました。

($, Backbone, App) ->
  class Layout extends Backbone.Model
    setContent: (content) ->
      do @currentContent.close if @currentContent?
      @currentContent = content
      ($ '#content').html content.render().el

  App.Helpers.Layout = new Layout

現在のモーダル テンプレート:

#dialog.modal.hide.fade
  .modal-header
    %a.close{href: "#"} ×
    / %h3=title
  .modal-body
    #dialog_content
  .modal-footer
    %a.btn.danger.yes Yes
    %a.btn.secondary.no No

現在のモーダル ダイアログ ビュー:

($, Backbone, App) ->

  class App.Views.Common.DialogView extends Backbone.View
    template: JST["common/dialog"]

    initialize: (options) ->
        super(options)

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

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

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

現在のダイアログ初期化子:

($, Backbone, App, FormView, DialogModalView) ->

  class App.Views.Common.DialogView extends FormView

    className: -> "modal"

    initialize: ->
      view = new DialogModalView()

      $(view.render().el).find(".modal-body").append(@template())
      $(view.render().el.children).modal('show')

セッション ビューはダイアログ ビューを拡張します。

($, Backbone, App, Session, DialogView) ->

  class App.Views.Sessions.NewView extends DialogView
    template: JST["sessions/new"]
4

1 に答える 1

1

より良いアプローチは、テンプレートをレンダリングするモーダル関連のロジックをビューに配置することです。呼び出されたビューの render メソッドがテンプレートをレンダリングし、具体的なビュー ロジックを一般的なモーダル機能から切り離すために、render などのイベントをトリガーする必要があります。

ビュー自体はこのイベントをリッスンでき、レンダリングされたテンプレートで呼び出しモーダルをトリガーするとします。コールバックに onRender などの名前を付けることができます。モーダルが一部のアプリケーション ロジックに関連している場合、モーダルの作成は、このイベント ドリブン アプローチを使用してビューの外部で処理することもできます。

このイベント ドリブン テンプレートとコールバック ロジックはBackbone Marionetteに実装されています(もちろん、モーダルの処理はプラグインにはありませんが、テンプレートをレンダリングしてイベントを発生させます)。これに加えて、これらの反復タスクを自動化することで時間を節約する多くの機能があります。

于 2013-09-08T08:54:27.143 に答える