在羊驼阵列中使用颜色选择器?

时间:2018-03-11 02:07:18

标签: javascript jsonschema alpacajs

我一直在尝试在数组中使用颜色选择器(使用zone.run)但没有成功。

这可能是我的“问题”,但我现在已经和它摔跤几个小时了,我很难过。我有一个简化的jsfiddle here来证明这个问题:我能够创建一个颜色选择器 - 但是在数组中相同的代码不起作用。

我误解了Alpaca数组Alpaca可以包含的内容吗?

来自jsfiddle的示例代码:

field

1 个答案:

答案 0 :(得分:0)

终于弄明白了。希望有一个更活跃的Alpaca开发社区,文档只是更详细一些关于如何构建optionsviews以及如何为colorpicker等字段指定参数的详细信息。

无论如何:工作小提琴: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);