如何向 AlloyUI 表单构建器添加自定义属性？答案

【问题标题】：How to add custom attributes to AlloyUI form builder?如何向 AlloyUI 表单构建器添加自定义属性？
【发布时间】：2016-04-05 16:43:48
【问题描述】：

我想做this jsfiddle example之类的事情，我需要在左侧面板属性上放置一些自定义属性。下面我尝试做类似的，但我不能拖动字段

YUI().use('aui-form-builder',function (Y) {

Y.MyFormCustom = Y.Component.create({ 名称：“表单节点”，

      ATTRS: {
          type: {
              value: 'custom'
          },
          customAttr: {
              validator: Y.Lang.isString,
              value: 'A Custom default'
          }
      },

      EXTENDS: Y.FormBuilderFieldBase,

      prototype: {
          getPropertyModel: function () {
              var instance = this;

              var model = Y.FormBuilderFieldBase.superclass.getPropertyModel.apply(instance, arguments);

              model.push({
                  attributeName: 'customAttr',
                  name: 'Custom Attribute'
              });

              return model;
          }
      }
  });

  Y.FormBuilder.types['custom'] = Y.MyFormCustom;

  var availableFields = [
    {
    iconClass: 'form-builder-field-icon-button',
    label: 'Button',
    type: 'custom'
    }
  ];

  myform= new Y.FormBuilder({
      availableFields: availableFields,
      boundingBox: '#myHolder'
  }).render();

我不知道为什么表格没有出现。任何帮助将不胜感激。

【问题讨论】：

它必须扩展您的自定义元素继承的类。在上面的代码中如果 EXTENDS: Y.FormBuilderFieldBase 那么在 availableFields type 应该是一个输入类型字段元素

标签： javascript yui alloy-ui

【解决方案1】：

您的示例对我很有帮助，因为我还需要扩展表单生成器字段。

解决上述问题很简单。换行：

Y.FormBuilder.types['custom'] = Y.MyFormCustom;

由

Y.FormBuilderField.types['custom'] = Y.MyFormCustom;

此解决方案的灵感来自 Alloy UI API 中的源代码。见链接： AlloyUI Form Builder

干杯

【讨论】：