Marionette Backbone：具有多种可能视图状态的子视图答案

【问题标题】：Marionette Backbone: Childviews with multiple possible view statesMarionette Backbone：具有多种可能视图状态的子视图
【发布时间】：2014-10-02 19:31:33
【问题描述】：

我正在从原版主干转移到 Backbone.Marionette，并试图以更 Marionette 风格解决常见的设计模式。

我有一个常见的模式，即拥有一个子视图（子视图），它可以有多个可能的状态，每个状态都是一个单独的视图或由 html 和 css 组成的状态。

个人资料说明就是一个例子。

我的应用程序有一个配置文件对象，每个配置文件都有一个注释集合。

配置文件将其笔记列表显示为 CompositeView (NotesView)，它由集合中每个笔记的 ItemView (NoteView) 组成。

每个 NoteView 都有两种可能的状态，显示状态和编辑状态。我目前正在使用 html 和 css 完成这种状态更改。在我的应用程序的其他地方，我通过在视图之间切换（销毁旧视图、创建新视图、添加新视图）来处理这种设计模式。

我想做的是为每个笔记设置两个可能的视图，NoteDisplayView 和 NoteEditView，然后控制由 NotesView 呈现的视图。

通读 Marionette 文档后，似乎 Marionette 视图交换的解决方案是使用布局、区域，然后定义该区域“显示”哪个视图。

我不清楚布局是否可以嵌入到复合视图中，以及这是否会抵消复合视图的优势。

我显然可以编写一些自定义代码来处理这种情况，继续通过 html 和 css 管理 NoteView 的状态，但我想知道其他 Marionette 用户发现了什么设计模式来完成这种行为。

【问题讨论】：

请发布您的代码。
是的，我同意，您应该添加一些代码。但是通过浏览，我认为您应该考虑使用木偶控制器。

标签： javascript backbone.js view marionette

【解决方案1】：

我会尽量回答你的问题，尤其是这个部分：

“我想做的是为每个笔记设置两个可能的视图，NoteDisplayView 和 NoteEditView，然后控制由 NotesView 呈现的视图。”

这可以通过重写 CompositeView 的 getChildView 来实现（我猜你使用的是 Marionette 2.x，对于 Marionette 1.x 它是 buildItemView ）方法，即：

getChildView: function(child) {
    var childView = this.getOption('childView') || this.constructor;

    if (!childView) {
      throw new Marionette.Error({
        name: 'NoChildViewError',
        message: 'A "childView" must be specified'
      });
    }

    return childView;
  },

只需在此处添加检查（使用模型的属性）并返回所需的视图 NoteDisplayView 或 NoteEditView。

更具体的例子：

假设每个模型都有属性“状态”，即“显示”|| “编辑”。

根据该状态，您已经知道如何呈现 NotesView。

我猜如果它是可编辑的，用户可以更改它，用户更改它并按下“保存”后，模型将被保存，状态将更改为显示。您的 CompositeView 将捕获模型的更改事件并重新渲染您的视图，但现在模型已处于显示模式，因此将渲染 NoteDisplayView。

希望这会有所帮助。

【讨论】：