Backbone.js 中的父子视图困境答案

【问题标题】：Parent-child view dilemma in backbone.jsBackbone.js 中的父子视图困境
【发布时间】：2012-02-16 10:17:22
【问题描述】：

让父视图用 UI 元素装饰子视图是个好主意吗？这样做的主要方法是什么？

例如，我有一个代表 JPEG 的 PhotoView 实例以及一些出现在悬停时的操作按钮。这个PhotoView 包含在PhotoDetailsView 中，它添加了一个Goolge Maps 地图和其他一些东西。

我想为照片添加一个edit 动作。问题是：如果我把它放在PhotoView 上，那么edit 函数回调应该只是触发一个事件，因为它实际上是PhotoDetailsView，它必须处理编辑操作。另一方面，如果我让父视图将此 UI 按钮添加到子视图，这也不是一个选项，因为父视图必须知道子视图的确切 UI 结构。无论如何，它们之间似乎存在令人讨厌的依赖关系，我想摆脱它。

我该如何解决这个难题？

【问题讨论】：

标签： javascript backbone.js

【解决方案1】：

如果您的PhotoView 元素是您的PhotoDetailsView 的子元素，在我看来，您应该将edit 按钮作为PhotoView 的一部分，但对您的PhotoDetailsView 执行操作。在您的PhotoView 模板中的某处使用<button class="edit">Edit</button>，这应该在您的PhotoDetailsView 中：

events: {
  "click .edit": "editPhoto"
},
editPhoto: function(event) {
  // Something something
}

这样，您的父视图需要知道的关于子视图的所有信息就是它具有edit 类的可点击内容。

【讨论】：