数组中每个 Object 的动态独立标题

Question

在制作羊驼造型的过程中，我遇到了一个不知如何进行的情况。

这是我正在使用的模式的表示：

$("#samplediv").alpaca({
  "schema": {
    "description": "My Favorite Ice Creams",
    "type": "array",
    "items": {
        "title": "Ice Cream",
        "type": "object",
        "properties": {
            "flavor": {
                "title": "Flavor",
                "description": "Ice cream flavor",
                "type": "string"
            },
            "topping": {
                "title": "Topping",
                "description": "Ice cream topping",
                "type": "string"
            }
        }
    }
  }
});

呈现的架构如下所示：

我有一个 object 数组，由文本字段组成。我的目标是根据 object 包含的数据为数组中的每个 object 创建一个动态且独立的标题。在示例中，这可能是将 'Ice Cream' 标题替换为第一个 object 的 'Vanilla'，以及第二个 object 的 'Chocolate'。

我已经尝试使用 postRender 回调来根据当前字段数据设置数组容器中每个 object 的标题属性，不过我似乎无法更新文本。

Answer 1

您可以通过一些 hack 来实现这一点，但默认情况下，Array 类型的字段通常对创建的每个项目使用相同的标题。您需要做的是在更改 Flavor 字段后更改标题，这将通过在该字段中使用更改事件来完成。

"flavor": {
      "events": {
        "change": function() {
          changeItemLabel(this.parent, this.getValue());
        }
      }
    }

这样可以解决问题，但所有新创建的项目都将具有相同的更新标题！所以我想到的想法是使用一种默认标签并覆盖新创建项目的更新标题。

这里 fiddle 展示了这个案例。我希望这对你有帮助，但如果这不是你想要的，请告诉我。

Answer 2

不幸的是，Alpajajs 文档一团糟，有几个功能没有描述。并且有几个示例根本不起作用。所以你必须深入研究源代码才能弄清楚它是如何工作的。 :(

要启用折叠，您必须将代码放在选项的 "items" 部分，如下所示：

"options": {
    "myfield": {
        "toolbarSticky": true,
        "toolbarPosition": "bottom",
        "type": "array",
        "items": {
            "collapsible": true,
            "fields": {
            }
        }
    }
}

数组中每个 Object 的动态独立标题

Dynamic Independent Title for Each Object in Array

javascript

alpacajs