javascript - 如何在公共(public)选项卡布局中包装和显示 View ？

Question

如何创建和使用一个通用布局，根据操作在其中动态显示 signinView 或 signupView？

当前的解决方案需要改进，因为它有两个布局，每个 View 都有单独的模板，模板仅在 %li.active 不同，布局 tabContent 区域也被填充以右 View 显示。

我创建了 jsfiddle 演示:link

模块正在监听 auth:tab:switchviews 事件并从 API 调用正确的操作。

define [
  "app"
  "marionette"
  "apps/auth/authLayout"
  "apps/auth/signin/signin_controller"
  "apps/auth/signin/signup_controller"
], (app, Marionette, authLayout, signinController, signupController) ->
  AuthApp = app.module("AuthApp", (AuthApp) ->
    AuthApp.Router = Marionette.AppRouter.extend

      API =
        signin: ->
          new AuthApp.Signin.Controller
            region: app.dialog

        signup: ->
          new AuthApp.Signup.Controller
            region: app.dialog

    AuthApp.on "auth:tab:switchviews", (name) ->
      if name is "signin"
        API.signin()
      else
        API.signup()

    app.on "auth:signin", ->
      API.signin()

signupView 和 signinView Controller 看起来很相似，所以我只粘贴了注册:

define [
  "app"
  "apps/auth/signup/signup_view"
  "apps/auth/signup/authentication_layout_for_signup"
  "models/registration"
], (App, signupView, signupAuthenticationLayout, Registration) ->
  "use strict"
  App.module "AuthApp.Signup", (Signup, App, Backbone, Marionette, $, _) ->

    Signup.Controller = App.Controllers.Base.extend
      initialize: (options) ->
        registration_model = new App.Entities.Registration()

        @layout = new signupAuthenticationLayout()

        new signupView.Signup
          model: registration_model  

        @layout.tabContent.show editView

  App.AuthApp.Signup.Controller

Marionette triggers: 不传递 data-content 所以我使用 events: 处理它，下面的注册布局:

define [
  "marionette"
  "app"
  "apps/auth/templates/signupAuthTpl"
], (Marionette, app, signupAuthTpl) ->
  "use strict"
  Marionette.Layout.extend
    template: signupAuthTpl
    regions:
      tabContent: "#tab-content"
    events:
      "click ul.nav-tabs li a": "switchViews"
    switchViews: (e) ->
      e.preventDefault()
      @curTab = $(e.target).data("content")
      app.AuthApp.trigger "auth:tab:switchviews", @curTab

signinView 的模板:

.modal-dialog
  .modal-content
    .modal-header
      %button.close{"aria-hidden" => "true", "data-dismiss" => "modal", :type => "button"} ×
    #auth-view-container
      %ul.nav.nav-tabs
        %li.active
          %a{"data-content" => "signin", "data-toggle" => "tab", :href => "#login"} Login
        %li
          %a{"data-content" => "signup", "data-toggle" => "tab", :href => "#signup"} Sign up
      #tab-content.tab-content

signupView 的模板，注意 .active 在第二个列表元素中:

.modal-dialog
  .modal-content
    .modal-header
      %button.close{"aria-hidden" => "true", "data-dismiss" => "modal", :type => "button"} ×
    #auth-view-container
      %ul.nav.nav-tabs
        %li
          %a{"data-content" => "signin", "data-toggle" => "tab", :href => "#login"} Login
        %li.active
          %a{"data-content" => "signup", "data-toggle" => "tab", :href => "#signup"} Sign up
      #tab-content.tab-content

我正在学习 Marionette.js，但我找不到使用模块和动态 View 布局的好例子。

Answer 1

http://jsfiddle.net/eguneys/77frf1f2/

if (@curTab == 'signin')
  @tabContent.show (new authApp.signUpView())
else
  @tabContent.show (new authApp.signinView())

我省略了 Controller ，也没有为事件链接操心，但你应该很容易地集成它们，只要明白这个想法。