Backbone:视图真的是控制器吗? [英] Backbone: Are Views really Controllers?

问题描述

我正在构建我的第一个 Backbone.js 应用程序，但我很困惑我应该为我的视图承担或隐藏多少责任.

I'm building my first Backbone.js app and I'm confused about how much responsibility I'm supposed to give to or hide from my Views.

在我的示例中，我正在构建一个从集合动态生成的富 UI 表(类似于 YUI 的数据网格).在我的应用程序中，我称之为AppTable".在我对 MVC 的理解中，我会想象会有某种 AppTable 控制器找到正确的集合，抓取一个哑"视图并将它需要呈现的集合中的任何信息传递给视图.在这种情况下，视图只会获取提供给它的数据并相应地修改 DOM，甚至可能填充模板或附加事件侦听器.

In my example, I'm building a Rich UI Table (similar to YUI's datagrid) that's dynamically generated from a Collection. In my app I call this an "AppTable". In my understanding of MVC, I would imagine that there'd be some kind of AppTable controller which finds the correct Collection, grabs a "dumb" View and passes to the View whatever information from the Collection it needs to render. In this senario, the View would do little more than take the data provided to it and modify the DOM accordingly, maybe even populating a template or attaching event listeners.

Backbone 似乎摒弃了在 View 和 Collection 之间使用控制器的想法.相反，视图使用对集合的引用进行初始化，并且视图有责任更新自身.

Backbone seems to do away with the idea of having a controller mediate between the View and Collection. Instead a View gets initialized with a reference to a Collection and it is View's responsibility to update itself.

我是否正确理解了这个架构?

Am I understanding this architecture correctly?

假设我这样做了，那么我的问题就变成了，当我的视图需要做越来越多的事情时会发生什么?例如，我想要列排序、行拖放、分页、搜索、表格控制链接(如新建、复制、删除行...等)等等.如果我们坚持智能"View 范式，其中 View 直接连接到一个 Collection，上面的函数会附加到 View 对象上吗?

Assuming I do, my question then becomes, what happens when my View needs to do more and more? For example, I want column sorting, drag-and-drop for rows, pagination, searching, table control links (like new, copy, delete row... etc), and more. If we stick with a "smart" View paradigm where the View is connected directly to a Collection, do the above functions become attached to View object?

考虑到这一点，我可以看到 View 从一个简单的表包装器成长为非常凌乱的野兽，并附加了许多功能.那么，在这种情况下，View 真的是控制器吗?

Thinking through this, I could see the View growing from a simple table wrapper to pretty messy beast with lot of functionality attached to it. So, is the View really a controller in this case?

推荐答案

您对架构的理解是正确的.Backbone 不承认传统 MVC 意义上的控制器"的概念.(事实上​​，Backbone 过去实际上有一个名为 Controller 的对象，但它已被重命名为 Router 以更准确地描述它的作用.)

Your understanding of the architecture is correct. Backbone does not recognize the concept of a "controller" in the traditional MVC sense. (In fact, Backbone used to actually have an object called a Controller, but it has been renamed Router to more accurately describe what it does.)

您列出的功能(拖放、删除行、排序等)都属于一个视图.视图描述您看到的内容并响应用户输入.任何涉及事件(点击、按键、提交等)的事情都在视图中.但是您的视图永远不应该实际操作数据；这应该由它的 model 来完成.您认为视图就像控制器是正确的，因为它打包数据并将其发送到模型，然后模型将适当地验证/设置/保存.发生这些操作后，视图会重新渲染自身以表示模型内数据的新版本.

The functions you list (drag-drop, delete rows, sorting, etc.) would all belong in a View. A view describes what you see and responds to user input. Anything involving an event (a click, a keypress, a submit, etc.) all go inside of a view. But your view should never actually manipulate the data; that should be done by its model. You are correct in thinking that a view acts like a controller, because it packages data and sends it to the model, which will then validate/set/save appropriately. Once those actions have occurred, the view re-renders itself to represent the new version of the data inside the model.

一个注意事项:您的视图不应与 DOM 过于紧密地联系在一起.Backbone 约定是拥有一个与您的视图相关联的顶级 DOM 元素(例如，表单或 div)，然后仅处理其子元素.那是合适的；通常，您的视图中的从该 div 中删除此链接"之类的内容并非如此.如果您发现视图变得越来越笨拙，您很可能需要将其分解为子视图，每个子视图都有各自的行为作为其整体的组成部分.

One note of caution: your view should not be too strenuously tied to the DOM. It is Backbone convention to have a top-level DOM element that your view is tied to (e.g., a form or a div) and then deal only with its sub-elements. That is appropriate; in general, things like "remove this link from this div" inside your view are not. If you find your view growing unwieldy, you most likely need to break it into subviews, each with their respective behaviors as components of their whole.

这篇关于Backbone:视图真的是控制器吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！