如何在Backbone.js中设计控制器？

Question

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

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

然而，在Derick的代码中，在路由中似乎不再使用Controller。另外，我想知道，有没有人有更清晰的代码示例，来展示让控制器协调骨干组件的好处？

PS我知道Controller in Marionette，但如果能看到一个没有Marionette依赖的主干代码示例就太好了。

Answer 1

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

我划分应用程序的代码。因此，如果在我的例子中，我有一个笔记记录应用程序，我有：

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

在一个应用程序中，我用RESTful的方式来划分它。列表、显示等。

以list为例，我有一个控制器来管理应用程序的这一部分。多么?

一些类似的东西(你会看到Marionette代码，但我猜你可以用骨干的方式来做，但是otoh，我真的推荐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对象。它所做的是请求一个笔记集合(如果不使用marionette，您可以根据需要检索笔记集合)。然后，我们等待笔记被获取(使用promises)。

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

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

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

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

我们不希望视图做任何类型的业务工作，比如添加注释、删除注释……因此，当我们点击编辑笔记(在list notes视图中)时，我们所做的只是触发一个事件(您可以使用一行主干代码创建您自己的事件聚合器)，然后控制器将侦听它，它将执行您所需的操作来编辑笔记。在我的例子中，我将事件冒泡到一个文件中，该文件管理所有这些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，因为它只为backbone提供了好的东西，绝对没有缺点。