一种通过 apos.schemas.field() 覆盖标准 html 输出的方法

Question

有谁知道如何 override/extend apos.schemas.field() 的行为让它输出自定义 HTML？

我已经尝试实现一个联系表单 'their way'，但是我对 Apostrophe CMS 为您提供的输出标记的控制级别感到非常失望。

我想用 Bootstrap 设置我的输入样式，并向输入添加一些额外的属性，但是 apos.schemas.field 方法似乎不接受除 readOnly 标志之外的任何其他参数，所以我想知道我是否可以扩展此方法以接受一个对象，该对象将包含我需要的所有必要数据，即 class、数据属性等

Answer 1

您可以通过多种方式完成此操作。

如果您想更改特定模式字段类型的所有字段的输出，您可以覆盖 lib/modules/apostrophe-schemas/views 中的相应模板，例如 string.html.

该模板的标准版本导入 macros.html 并调用 schemas.string 等，但您不必这样做。

您需要做的是：

确保您的字段的全部内容包含在具有 data-name 属性的外部元素中，该属性设置为架构字段名称。包括任何标签或其他应与输入字段一起显示和隐藏的内容。
确保字段本身有一个 name 属性，该属性也设置为架构字段名称。这适用于大多数字段类型，请参阅 macros.html 了解不常见的情况，例如标签和加入编辑器。

总的来说：您可以更改标记，但 data- 属性和 name 属性必须保持不变。

"What if I want the conventional formatting in Apostrophe's forms, and special formatting in my forms?" 一种方法是在架构中的字段上设置 style 属性，如下所示：

{
  name: 'flavor',
  type: 'string',
  style: 'custom'
}

那么你的 string.html 可以是这样的：

{%- import "macros.html" as schemas -%}
{% if (data.style == 'custom') %}
  {# Custom way #}
  <div data-name="{{ data.name }}">
    <h4>{{ data.label }}</h4>
    <input name="{{ data.name }}" />
  </div>
{% else %}
  {# Normal way #}
  {{ schemas.string(data) }}
{% endif %}

请注意，这使得 custom 样式可用于您网站上您在添加字段时选择使用它的任何表单。另请注意，如果要更改，可以使用 addFields 重述标准字段的定义，比方说，title 以使用自定义样式。

"Where do I output the current value of the field?" 你不知道。模式模块 javascript 将即时设置并读取它，这就是您必须遵循 data-name 和 name 属性约定的原因之一。

一种通过 apos.schemas.field() 覆盖标准 html 输出的方法

A way to override standard html output by apos.schemas.field()

apostrophe-cms