Question

'bpmn.Gateway': {
    NumberofTrigger : {
        type: 'select',
        options: [
            { value: '0', content: '0' },
            { value: '1', content: '1' },
            { value: '2', content: '2' },
            { value: '3', content: '3' }
        ],
        label: 'Number of Trigger',
        group: 'general',
        index: 1
    },

    ComparisonValue : {
        type: 'text',
        label: 'Comparison Value',
        group: 'general',
        index: 2
    },
    TriggerLogic : {
        type: 'select',
        options: ["Start With",'Contains','End With','Equals','Smaller Than','Greater Than','Not Equals','REGEX','Web Service'],
        label: 'Trigger Logic',
        group: 'general',   
        index: 1
    }
},

拖出形状后，将显示检查器表，选项将显示在NumberofTrigger中（为了选择要选择的触发器数量选项），并根据所选值，将显示TriggerLogic和ComparisonValue的设置数量。

由于我没有找到通过阅读源代码来解决这个问题的方法，我想知道如何实现这一点。

Answer 1

如果我的问题是正确的，并且您选择的触发器数量有限，我相信您可以使用when expressions with "greater than equal" comparisons (i.e. gte primitives)显示更多字段，例如：

'bpmn.Gateway': {
  inputs: {
    attrs: {
      NumberofTrigger : {
        type: 'select',
        options: [
          { value: '0', content: '0' },
          { value: '1', content: '1' },
          { value: '2', content: '2' },
          { value: '3', content: '3' }
        ],
        label: 'Number of Trigger',
        group: 'general',
        index: 1
      },

      ComparisonValue0 : {
        when: { gte: {'attrs/NumberofTrigger': '0'} },
        type: 'text',
        label: 'First Comparison Value',
        // other properties
      },
      TriggerLogic0 : {
        when: { gte: {'attrs/NumberofTrigger': '0'} },
        type: 'select',
        label: 'First Trigger Logic',
        // other properties
      },

      ComparisonValue1 : {
        when: { gte: {'attrs/NumberofTrigger': '1'} },
        type: 'text',
        label: 'Second Comparison Value',
        // other properties
      },
      TriggerLogic1 : {
        when: { gte: {'attrs/NumberofTrigger': '1'} },
        type: 'select',
        label: 'Second Trigger Logic',
        // other properties
      },

      ComparisonValue2 : {
        when: { gte: {'attrs/NumberofTrigger': '2'} },
        type: 'text',
        label: 'Third Comparison Value',
        // other properties
      },
      TriggerLogic2 : {
        when: { gte: {'attrs/NumberofTrigger': '2'} },
        type: 'select',
        label: 'Third Trigger Logic',
        // other properties
      },

      ComparisonValue3 : {
        when: { gte: {'attrs/NumberofTrigger': '3'} },
        type: 'text',
        label: 'Fourth Comparison Value',
        // other properties
      },
      TriggerLogic3 : {
        when: { gte: {'attrs/NumberofTrigger': '3'} },
        type: 'select',
        label: 'Fourth Trigger Logic',
        // other properties
      },
    }
  }
}

这是main purpose of when according to the documentation：

当表达式求值为false（条件不满足）时，使用此when子句的输入将隐藏。否则，将显示此输入。

JointJS如何根据用户输入动态地向检查器添加选项？

1 个答案: