Question

我想先在#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"]

Answer 1

更好的方法是将模态相关逻辑放置到视图中，从而呈现模板。当视图的render方法调用它呈现模板然后将具体视图逻辑与常见的模态功能分离时，它应该触发一个事件，例如render。

视图本身可以侦听此事件，并且当它在渲染模板上触发调用模式时。您可以将回调命名为onRender。如果模态与某些应用程序逻辑相关，则可以使用此事件驱动方法在视图外部处理模态创建。

此事件驱动的模板和回调逻辑在Backbone Marionette中实现（当然，模式的处理不在插件中，但它呈现模板并触发事件）。看看它，除此之外它还有许多功能可以通过自动执行这些重复性任务来节省您的时间。

如何在模态模板对话框中显示嵌入模板？

1 个答案: