在带有 Alpaca 的数组中使用颜色选择器？

Question

我一直在尝试在数组中使用颜色选择器（使用 Alpaca）但没有成功。

这可能是我的 "issue"，但我已经研究了好几个小时了，我被难住了。我有一个精简的 jsfiddle here，它演示了这个问题：我能够创建一个颜色选择器——但是相同的代码在数组中不起作用。

我是不是误解了 Alpaca 数组 field 可以包含什么？

jsfiddle 中的示例代码：

  var test = {
  view: 'bootstrap-edit-horizontal',
  schema: {
    "title": "Can't put a color picker in array?",
    "type": "object",
    "properties": {
      "testColorPicker": {
        "type": "string",
        "default": "#ff0000"
      },
      "categories": {
        "type": "array",
        "items": {
          "title": "Category",
          "type": "object",
          "properties": {
            "categoryID": {
              "type": "string",
              "title": "Category ID"
            },
            "categoryColor": {
              "type": "string",
              "title": "Where is my color picker?"
            }
          }

        }
      }
    }
  },
  options: {
    fields: {
      "testColorPicker": {
        "type": "colorpicker",
        "label": "Test Color"
      },
      "category": {
        "type": "object",
        "items": {
          "categoryID": {
            "label": "Category ID"
          },
          "categoryColor": {
            "type": "colorpicker",
            "label": "Category Color"
          }
        }
      }
    }
  }
};

$('#form').alpaca(test);

Answer 1

终于明白了。希望有一个更活跃的 Alpaca 开发社区，并且文档更详细地说明 options 和 views 应该如何构建以及如何为 colorpicker 等字段指定参数。

无论如何：工作fiddle：https://jsfiddle.net/ut8wgtk5/60/

var data = {
    view: {
        "parent": "bootstrap-edit-horizontal"
    },
    schema: {
        "title": "Test",
        "type": "object",
        "properties": {
            "testColorPicker": {
                "type": "string",
                "default": "#000000"
            },
            "testSummernote": {
                "type": "string"
            },

            "testArray": {
                "type": "array",
                "title": "Array",
                "items": {
                    "title": "Array Item",
                    "type": "object",
                    "properties": {
                        "categorySummernote": {
                            "type": "string",
                        },
                        "categoryColor": {
                            "type": "string",
                            "default": "#000000"
                        }
                    }
                },
            }

        }
    },
    options: {
        "fields": {
            "testColorPicker": {
                "type": "colorpicker",
                "component": true,
                "label": "Test Color",
                useAlpha: false
            },
            "testSummernote": {
                "label": "Test Summernote",
                "type": "summernote",
                "summernote": {
                    "toolbar": [
                        ['style', ['bold', 'italic', 'underline', 'clear']],
                        ['font', ['strikethrough', 'superscript', 'subscript']],
                        ['fontsize', ['fontsize']],
                        ['color', ['color']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['height', ['height']]
                    ]
                }
            },
            "testArray": {
                "toolbarSticky": true,
                "actionbarStyle": "bottom",
                "label": "Array",
                "items": {
                    "fields": {
                        "categorySummernote": {
                            "label": "Test Summernote",
                            "type": "summernote",
                            "summernote": {
                                "toolbar": [
                                    ['style', ['bold', 'italic', 'underline', 'clear']],
                                    ['font', ['strikethrough', 'superscript', 'subscript']],
                                    ['fontsize', ['fontsize']],
                                    ['color', ['color']],
                                    ['para', ['ul', 'ol', 'paragraph']],
                                    ['height', ['height']]
                                ]
                            }
                        },
                        "categoryColor": {
                            "type": "colorpicker",
                            "component": true,
                            "label": "Test Color"
                        }
                    }
                }
            }
        }
    }
};

$('#form').alpaca(data);

在带有 Alpaca 的数组中使用颜色选择器？

Using a colorpicker in an array with Alpaca?

javascript

jsonschema

alpacajs