backbone.js - 如何在 Backbone.js 中设计 Controller ？

Question

我对有一个 Controller 来协调渲染、事件处理、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-your-code/

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

PS我知道Controller in Marionette ，但如果能看到没有 Marionette 依赖的 Backbone 代码示例会很棒。

Answer 1

首先，我使用 Marionette.js，但是对于 Controller ，我使用了一个普通对象。

我划分了应用程序的代码。所以，如果在我的情况下，我有一个笔记应用程序，我有:

记笔记应用

用于编辑类别的应用程序

用于身份验证等的应用程序

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

以列表为例，我有一个 Controller 来管理应用程序的这一部分。怎么样？

一些东西(你会看到 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

Controller 是一个普通的 javascript 对象。它的作用是要求收集笔记(如果不使用 Marionette ，您可以根据需要检索笔记集)。然后我们等到笔记被获取(使用 promise )。

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

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

为了显示笔记，我们检索 View 并将其显示在需要显示笔记的区域中(忽略其他代码)。

现在是使用 Controller AKA 协调所有东西的有趣部分。

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

与我为新笔记所做的相同，我将它冒泡到我应用程序的另一部分。

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

你问的是路由器。 Marionette router 的好处(抱歉，这里我将谈论 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功能，嗯，你看到了我在那里做什么。还记得我是如何冒泡编辑和新 View 的吗？他们停在这里，在这里我监听这些事件，我只是在 API 中调用适当的函数对象。好的部分是我决定创建另一条路线以转到新表单，我只需要添加路线。代码就在那里，无需更改任何代码。

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

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