Formio.js - 如何从自定义组件评估 javascript

问题描述

我围绕 selectBoxes 构建了一个名为 DynamicSelectBoxes 的自定义组件。在这个自定义组件的数据选项卡中，我想允许我的用户输入自定义 javascript，它应该呈现为选择框（就像您可以在选择下拉组件中一样。例如：

values = [{
  "label": "Label 1","value": "val1"
},{
  "label": "Label 2","value": "val2"
}];

应该呈现为两个复选框：

<input type="checkBox" value="{{values[0]['value']}}"> {{values[0]['label']}}
<input type="checkBox" value="{{values[1]['value']}}"> {{values[1]['label']}}

但是，我不确定如何完成此操作，因为我不知道如何将输入的字符串评估为 javascript。我一直在查看多个组件的源代码，但我看不到这是在哪里/如何完成的。

这是我目前的进展：

1.我已经定义了模板：

//DynamicSelectBoxes.ts
Templates.templates.bootstrap.dynamicSelectBoxes = {
    form: `<div class="form-check checkBox">
    {% ctx.values.forEach(function(item){ %}
       <input type="checkBox" value="{{item.value}}"> {{item.label}}
    (% }) %}
    </div>`
};

2.我已经扩展了架构：

//DynamicSelectBoxes.ts
static schema() {
      return FieldComponent.schema({
          type: 'dynamicSelectBoxes',inputType: 'checkBox',key: 'dynamicSelectBoxes',label: 'Select Boxes (Dynamic)',dataGridLabel: true,labelPosition: 'right',data: {
              javascript: ''
          },});
}

3.我在数据选项卡中添加了一个 javascript 编辑器：

//editForm/DynamicSelectBoxes.edit.data.ts
{
      key: 'data.javascript',type: 'textarea',as: 'javascript',editor: 'ace',input: true,label: 'Dynamic Values',tooltip: 'Javascript expression'
},

4.我已将此添加到渲染功能：

//DynamicSelectBoxes.ts
public render(children) {
        const info = this.inputInfo;
        return super.render(this.renderTemplate('dynamicSelectBoxes',{
            input: info,checked: this.checked,values: this.component.data.javascript //this I have added <--
        }));
}

现在在渲染这个时，显然我得到了错误 values.forEach is not a function，因为它把它解释成一个字符串：

Skærmbillede 2021-01-05 kl 10 53 00

有人可以在这里指导我正确的方向吗？如何允许用户输入自定义 javascript 并对其进行评估并在渲染中使用它？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

formio