2

我有兴趣拥有一个控制器来协调渲染、事件处理、URL 路由器导航和网络访问。有点类似于 Controller 在 Spine 中所做的事情：http: //spinejs.com/docs/controllers

在 Backbone 领域，到目前为止我能找到 Derick Bailey 的一篇文章：http: //lostechies.com/derickbailey/2011/08/28/dont-execute-a-backbone-js-route-handler-from -你的代码/

然而，在 Derick 的代码中，控制器似乎不再在路由中使用。另外，我想知道，如果有人有更清晰的代码示例，说明让控制器协调 Backbone 组件的好处？

PS 我知道Marionette 中的 Controller，但是很高兴看到没有 Marionette 依赖的 Backbone 代码示例。

4

1 回答 1

3

首先，我使用 Marionette.js，但对于控制器，我使用普通对象。

我划分应用程序的代码。所以，如果就我而言，我有一个笔记应用程序，我有：

  • 一个记笔记的应用程序
  • 用于编辑类别的应用程序
  • 用于身份验证等的应用程序

在应用程序（即笔记）中，我以 RESTful 方式对其进行划分。列表、显示等

以列表为例，我有一个控制器来管理应用程序的这一部分。如何？

类似的东西（你会看到 Marionette 代码，但我想你可以用 Backbone 的方式来做，但是，我真的会推荐 Marionette）：

List.Controller =  
  listNotes: ->
    notes = App.request "notes:entities"

    App.execute "when:fetched", notes, =>

      @layout = @getLayoutView()

      @layout.on "show", =>
        @showNotes notes
        @showForm notes

      App.mainRegion.show @layout

  showNotes: (notes) ->
    notesView = @getNotesView notes
    notesView.on "childview:edit:note", (iv, note) =>
      App.vent.trigger "edit:note", notes, note, @layout.formRegion
    @layout.listRegion.show notesView

  showForm: (notes) ->
    App.execute "new:note:view", @layout.formRegion, notes

  getLayoutView: ->
    new List.Layout

  getNotesView: (notes) ->
    new List.Notes
      collection: notes

控制器是一个普通的 javascript 对象。它的作用是要求收集笔记（如果不使用牵线木偶，您可以根据需要检索笔记集）。然后我们等到笔记被提取（使用承诺）。

当我们有笔记时，我们创建一个布局（你可以使用你想要的，如果你喜欢布局想法，你有 layoutManager），当布局显示出来时，我们显示笔记列表和表单（输入新笔记）。

然后我们将布局添加到所需的区域（同样，layoutManager 将适用于非木偶用户）。

为了显示注释，我们检索我们的视图并将其显示在想要显示注释的区域中（忽略其他代码）。

现在有趣的部分是使用控制器 AKA 来协调所有的东西。

我们不希望视图做任何类型的业务工作，比如添加注释、删除注释......所以当我们点击编辑注释（在列表注释视图中）时，我们所做的只是触发一个事件（你可以创建您自己的带有一行主干代码的事件聚合器），然后控制器将监听它，它将执行您需要做的事情来编辑笔记。就我而言，我将事件冒泡到一个管理所有这些 RESTful 控制器的文件中，然后在我的应用程序的其他部分调用编辑控制器。

我为新笔记做的事情是一样的，我将它冒泡到我的应用程序的另一部分。

因此，控制器，我使用控制器来显示应用程序这一部分所需的视图，以执行视图需要执行的不属于视图的操作，例如 CRUD 操作或转换到其他路由。

你问的是路由器。Marionette 路由器的优点（对不起，我在这里谈谈 Marionette）是我们可以使用一个普通的对象来为路由器提供数据。这里有什么优势？

想象一下：

class NotesApp.Router extends Marionette.AppRouter    
    appRoutes:
      "": "listNotes"

API =
  listNotes: ->
    NotesApp.List.Controller.listNotes()
  newNote: (region, notes) ->
    NotesApp.New.Controller.newNote region, notes, NotesApp.categories
  editNote: (region, notes, note) ->
    NotesApp.Edit.Controller.editNote region, notes, note, NotesApp.categories

App.commands.setHandler "new:note:view", (region, notes) ->
  API.newNote region, notes

App.vent.on "edit:note", (notes, note, region) ->
  API.editNote region, notes, note

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

（我删除了一些代码，所以不要试图挣扎一些参数的来源）。

这是 Marionette 中使用该API对象初始化的路由器。优点是我可以API从路由器和其他代码访问该对象。

所以当我到达那条路线时，我去了listNotes功能区，你看到了我在那里做了什么。还记得我是如何冒泡编辑和新视图的吗？他们停在这里，我在这里监听这些事件，我只是在API对象中调用适当的函数。好的部分是我决定创建另一条路线来进入新表格，我只需要添加路线。代码就在那里，无需更改任何代码。

好吧，这最终是一个巨大的回应，但如果没有这个，我无法解释我赋予控制器的责任：P

最后，我强烈推荐使用 Marionette，因为它只为骨干提供好东西，绝对没有缺点。

于 2013-05-27T10:55:03.240 回答