0

该应用程序有一个 mainRegion,它显示了一个动态的布局。我有一个路由问题和访问布局以及更新其pizzaTypeRegion. 这个布局是在 list_controller.js.coffee 中创建的,它有一个pizzaTypeNameRegion(保存比萨类型名称)和一个pizzaTypeRegion(显示比萨类型详细信息)。pizzaTypeRegion当我手动编辑 url: 时,http://localhost:3000/#pizza_types我想更新 #pizza_types 按预期显示所有 Pizza_types。

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

在 url 中手动输入 Pizza_type 的 id 时:

http://localhost:3000/#pizza_types/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 来影响布局中的其他区域?

**编辑**

  • 我摆脱了上面的代码并将所有内容放回原处,以便可以保持关注点分离。我最终没有使用全局,而是使用事件总线

列表控制器:

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

显示控制器:

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 要更新的内容。效果很好,干净多了,而且是解耦的。

4

2 回答 2

0

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

  • 将布局附加到可访问的地方(不一定是全局的,例如可以在子应用程序级别)
  • 使用事件对修改做出反应并更新您的布局/视图

如果您在多个视图中使用此布局,另一件要调查的事情是在子应用程序的初始化程序中对其进行实例化并将其附加到某处(例如子应用程序),以便可以从多个控制器访问它。

于 2013-09-06T07:07:13.430 回答
0

在我的 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
于 2013-09-06T17:20:05.713 回答