该应用程序有一个 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 要更新的内容。效果很好,干净多了,而且是解耦的。