Question

App有一个mainRegion，它显示了一个动态的布局。我有一个路由问题和访问布局的组合问题，并更新其pizzaTypeRegion。此布局在list_controller.js.coffee中创建，它具有pizzaTypeNameRegion（保存披萨类型名称）和pizzaTypeRegion（显示披萨类型详细信息）。我想在手动修改网址pizzaTypeRegion时更新http://localhost:3000/#pizza_types。 #pizza_types按预期显示所有pizza_types。

我可以点击pizzaTypeNameRegion中的链接，然后使用正确的内容更新pizzaTypeRegion，而不会出现任何问题。

在网址中手动输入pizza_type的ID时：

http://localhost:3000/#pizza_types/1 - 应显示第1个披萨类型，但不会更新pizzaTypeRegion

http://localhost:3000/#pizza_types/2 - 应显示第二个披萨类型，但不会更新pizzaTypeRegion

我得到的证据是通过登录控制台获得了特定的pizza_type。

pizza_types_app.js.coffee

@Pizzeria.module "PizzaTypesApp", (PizzaTypesApp, App, Backbone, Marionette,$, _) ->
  @startWithParent = false

  class PizzaTypesApp.Router extends Marionette.AppRouter
    appRoutes:
      "pizza_types" : "listPizzaTypes"
      "pizza_types/:id" : "showPizzaType"

  API =

   listPizzaTypes: ->
     PizzaTypesApp.List.Controller.listPizzaTypes()

   showPizzaType: (model) ->   
     PizzaTypesApp.Show.Controller.showPizzaTypeFromEvent model     


  App.on "pizzaTypes:show", ->
    App.navigate "pizza_types"
    API.listPizzaTypes()

  App.addInitializer ->
    new PizzaTypesApp.Router
      controller: API

  App.reqres.setHandler "show:pizza:type:view", (model) ->
    API.showPizzaType model

  App.reqres.setHandler "show:first:pizzaType:view", ->
    API.showFirstPizzaType()

list_controller.js.coffee

@Pizzeria.module "PizzaTypesApp.List", (List, App, Backbone, Marionette, $, _) ->

      List.Controller =

        listPizzaTypes: ->
          pizzaTypes = App.request "get:pizza:types:entities"
          pizzaType = gon.pizza_type
          @layout = new List.Layout

          @layout.on "show", =>
            @pizzaTypeNameRegion pizzaTypes
            @pizzaTypeRegion()

          App.mainRegion.show @layout

        pizzaTypeNameRegion: (pizzaTypes) ->
          pizzaTypesNameView = new List.PizzaTypeNames
            collection: pizzaTypes
          @layout.pizzaTypeNameRegion.show pizzaTypesNameView

          pizzaTypesNameView.on "itemview:show:pizza:type", (childView, pizzaType) =>
            @newPizzaTypeRegion(pizzaType)

        pizzaTypeRegion: ->
          initialPizzaTypeView = App.request "show:first:pizzaType:view"
          @layout.pizzaTypeRegion.show initialPizzaTypeView

        newPizzaTypeRegion: (pizzaType) ->
          newPizzaTypeView = App.request "show:pizza:type:view", pizzaType.id
          @layout.pizzaTypeRegion.show newPizzaTypeView

show_controller.js.coffee

@Pizzeria.module "PizzaTypesApp.Show", (Show, App, Backbone, Marionette, $, _) ->

  Show.Controller =

    showPizzaTypeFromEvent: (model) ->
      pizzaType = App.request "pizzaType:entity", model
      pizzaTypeView = new Show.PizzaType
        model: pizzaType
      App.mainRegion.show pizzaTypeView  
      # mainRegion is updated with whatever the url is 
      # ex)`http://localhost:3000/#pizza_types/2` will 
      # place the pizza_type with the id of 2 in the 
      # App's mainRegion, breaking the layout that I 
      # set up in the list_controller.js.coffee. Browser back and forward
      # buttons work, but layout is broken, missing other regions (and their info)

如何使用新的披萨类型更新pizzaTypeRegion？有没有办法访问在list_controller中创建的布局实例，只是pizzaTypeRegion更新了新内容，而不是通过手动输入URL来影响布局中的其他区域？

** 编辑 **

我摆脱了上面的代码并把所有东西都放回去了可以维持关注的问题。我最终没有使用全球，但是而不是事件总线

list_controller：

newPizzaTypeRegion: (pizzaType) ->
  id = pizzaType.id
  App.vent.on "new:pizza:type:for:pizza:type:region", (pizzaTypeView) =>
    @layout.pizzaTypeRegion.show pizzaTypeView

show_controller：

showPizzaTypeFromEvent: (id) ->
  pizzaType = App.request "pizzaType:entity", id
  pizzaTypeView = new Show.PizzaType
    model: pizzaType
  App.vent.trigger "new:pizza:type:for:pizza:type:region", pizzaTypeView

List.Controller知道如何自我更新，Show.Controller告诉List.Controller要更新的内容。工作得很好，更清洁，而且它是分离的。

Answer 1

很难给出一个好的答案，因为它取决于具体的实例。基本上你有两个选择：

将布局附加到可访问的位置（不一定是全局的，例如可以在子应用程序级别）
使用事件对修改做出反应并更新布局/视图

如果您在多个视图中使用此布局，另一件事就是在子应用程序的初始化程序中实例化它并将其附加到某个地方（例如子应用程序），以便可以从多个控制器访问它。

Answer 2

在我的pizza_types_app.js.coffee子模块中：

@Pizzeria.module "PizzaTypesApp", (PizzaTypesApp, App, Backbone, Marionette,$, _) ->
  @startWithParent = false

  # took this out of the list_view    
  class PizzaTypeName extends Backbone.Marionette.ItemView
    template: "pizza_types/list/templates/_pizza_type_name"
    modelEvents:
      "change" : "render"

    events:
      "click a" : "showPizzaType"

    showPizzaType: (event) ->
      @trigger "show:pizza:type", @model
      @model     

  class PizzaTypeNames extends Backbone.Marionette.CompositeView
    template: "pizza_types/list/templates/pizza_type_names"
    itemView: PizzaTypeName

  # took this out of the list_view 
  class DefaultLayout extends Backbone.Marionette.Layout
    template: "pizza_types/list/templates/pizza_types_layout"
    regions:
      pizzaTypeNameRegion : "#pizza-type-name-region"
      pizzaTypeRegion : "#pizza-type-region"

  App.addInitializer ->
    @layout = new DefaultLayout
    Pizzeria.PizzaTypesApp.layout = @layout
    App.mainRegion.show @layout

    @layout.on "show", =>
      pizzaTypes = App.request "get:pizza:types:entities"   
      pizzaTypesNameView = new PizzaTypeNames
        collection: pizzaTypes

      @layout.pizzaTypeNameRegion.show pizzaTypesNameView 
      @layout.pizzaTypeRegion

  class PizzaTypesApp.Router extends Marionette.AppRouter
    appRoutes:
      "pizza_types" : "listPizzaTypes"
      "pizza_types/:id" : "showPizzaType"


  API =

   listPizzaTypes: ->
     PizzaTypesApp.List.Controller.listPizzaTypes()

   showPizzaType: (id) ->   
     PizzaTypesApp.Show.Controller.showPizzaTypeFromEvent id

   showFirstPizzaType: ->
     PizzaTypesApp.Show.Controller.showFirstPizzaType()

  App.on "pizzaTypes:show", ->
    App.navigate "pizza_types"
    API.listPizzaTypes()

  App.addInitializer ->
    new PizzaTypesApp.Router
      controller: API

  App.reqres.setHandler "show:pizza:type:view", (model) ->
    API.showPizzaType model

  App.reqres.setHandler "show:first:pizzaType:view", ->
    API.showFirstPizzaType()

<强> show_controller.js.coffee

@Pizzeria.module "PizzaTypesApp.Show", (Show, App, Backbone, Marionette, $, _) ->

  Show.Controller =

    showPizzaTypeFromEvent: (id) ->
      pizzaType = App.request "pizzaType:entity", id
      pizzaTypeView = new Show.PizzaType
        model: pizzaType
      pizzaTypeView

      @layout = Pizzeria.PizzaTypesApp.layout
      App.mainRegion.show @layout
      @layout.pizzaTypeRegion.show pizzaTypeView

<强> list_controller.coffee.js

@Pizzeria.module "PizzaTypesApp.List", (List, App, Backbone, Marionette, $, _) ->

  List.Controller =

    listPizzaTypes: ->
      pizzaTypes = App.request "get:pizza:types:entities"
      pizzaType = gon.pizza_type
      @layout = Pizzeria.PizzaTypesApp.layout #new List.Layout

      @layout.on "show", =>
        @pizzaTypeRegion()

      App.mainRegion.show @layout

    pizzaTypeNameRegion: (pizzaTypes) ->
      pizzaTypesNameView = new List.PizzaTypeNames
        collection: pizzaTypes
      @layout.pizzaTypeNameRegion.show pizzaTypesNameView

      pizzaTypesNameView.on "itemview:show:pizza:type", (childView, pizzaType) =>
        @newPizzaTypeRegion(pizzaType)

    pizzaTypeRegion: ->
      initialPizzaTypeView = App.request "show:first:pizzaType:view"
      @layout.pizzaTypeRegion.show initialPizzaTypeView

    newPizzaTypeRegion: (pizzaType) ->
      newPizzaTypeView = App.request "show:pizza:type:view", pizzaType.id
      @layout.pizzaTypeRegion.show newPizzaTypeView


    getPizzaTypeNameView: (pizzaTypes) ->
      new List.PizzaTypeNames
        collection: pizzaTypes

    getPizzaTypeLayout: ->
      new List.Layout

有没有办法从Marionette.js中的ShowController访问在ListController中创建的布局区域？

2 个答案: