小部件数组字段和上下文 'area' 字段

Question

我有一个带有以下设置的撇号 cms 小部件：

module.exports = {
extend: 'apostrophe-widgets',
label: 'Content Tabs',
addFields: [{
    name: 'tabs',
    label: 'Tabs',
    type: 'array',
    titleField: 'tabTitle',
    schema: [{
        type: 'string',
        name: 'tabTitle',
        label: 'Title'
    },
    {
        type: 'area',
        name: 'tabContent',
        label: 'Content',
        contextual: true
    }
    ]
}]

}

现在，当我将此小部件添加到页面时，tabContent 区域呈现为空白且没有加号，因此我无法向其添加任何组件。

如果我将 contextual 设置为 false，我可以添加内容，但不会保存，因为没有触发保存事件（这就是为什么我从 contextual先设置为true）。

UPD：通过检查 Apostrophe CMS 的内部结构，我发现 array 字段没有实现任何逻辑来检测其自身字段的上下文字段。

有人知道如何让它工作吗？

Answer 1

这是一个已知问题：

https://github.com/punkave/apostrophe/issues/993

解决方法是在窗口小部件的对话框中编辑这些区域 non-contextually。如果您不设置上下文标志并且在架构配置中为该区域提供完整选项，就会发生这种情况。

我们确实希望将来能够对嵌套在数组中的区域进行上下文编辑。 github 问题中描述了一些棘手的方面。

但是，您可能会非常喜欢另一种选择：

定义一个 "tab" 小部件（注意它是单数的 — 只有一个选项卡）。这个选项卡小部件有一个标题和一个内容区域，就像它在您的示例中一样。
定义一个 "tabs" 小部件。在该小部件中，您将只有一个模式字段：嵌套 area 仅包含 tab 小部件。设为 contextual: true.
将 "tabs" 小部件添加到您的模板。胜利！

这里我们使用嵌套区域而不是数组。嵌套区域的上下文编辑在 Apostrophe 中是 well-supported。

一个问题是，对选项卡顺序等的编辑现在由 re-ordering 小部件通过拖放或箭头完成。如果您使用 JavaScript 隐藏除 "active" 选项卡以外的所有选项卡，这对您来说效果不佳。但是，您可以使 JavaScript 以用户是否具有选项卡小部件的编辑权限为条件。如果他们这样做，您只需显示该区域中的所有小部件，以便它们可以 re-ordered、添加新选项卡等。

小部件数组字段和上下文 'area' 字段

Widget array field and contextual 'area' fields

apostrophe-cms