我可以在jointJS中动态更改我的检查员的选择选项吗 - Rappid

Question

在我的 inspector.js 中，我声明了这个名称为 tr_rules 的选择框，它有 2 个选择选项：

'tr_rules': { type: 'select', options: ['option1', 'option2'], group: 'attributes', label: 'Rule', index: 3 },

有什么方法可以正确定义我的检查器，以便数组选项最初为空并且：

我将使用var 的内容动态填充选项？

例如var optionsVariable，具体时间是：

var optionsVariable  = [myDynamicOption1, myDynamicOption2, myDynamicOption3];

Answer 1

对于每个链接，我们将获得marker-source.fill 属性的随机值：

这是 KitchenSink 演示应用程序的一部分 (http://resources.jointjs.com/demos/kitchensink)

createInspector: function(cell) {

    var props = App.config.inspector[cell.get('type')];

    if (cell.isLink()) {
        var a = {
            inputs: {
                attrs: {
                    '.marker-source': {
                        transform: {
                            type: 'select',
                            options: [Math.round(Math.random() * 100), Math.round(Math.random() * 100), Math.round(Math.random() * 100)],
                        }
                    }
                }
            }
        };

        _.merge(props, a);
    }

    return joint.ui.Inspector.create('.inspector-container', _.extend({
        cell: cell
    }, props));
},

App.config.inspector 在单独的文件中有 Inspector 的定义

App.config.inspector = {

'app.Link': {
    inputs: {
        attrs: {
            '.marker-source': {
                transform: {
                    ty pe: 'select',
                    group: 'marker-source',
                    label: 'Source arrowhead',
                    index: 1
                },
                fill: {
                    type: 'color-palette',
                    options: options.colorPalette,
                    group: 'marker-source',
                    label: 'Color',
                    when: { ne: { 'attrs/.marker-source/transform': 'scale(0.001)'}},
                    index: 2
                }
            },
            '.marker-target': {
                transform: {
                    type: 'select',
                    options: options.arrowheadSize,
                    group: 'marker-target',
                    label: 'Target arrowhead',
// ... 

Answer 2

在检查器中将您的选项设置为您想要的变量。

如果您想使用依赖项显示选项，您也可以使用 when 属性来执行此操作，例如

var dynamicOptions = [
            { value: 'Alegreya Sans', content: '<span style="font-family: Alegreya Sans">Alegreya Sans</span>' },
            { value: 'Averia Libre', content: '<span style="font-family: Averia Libre">Averia Libre</span>' },
            { value: 'Roboto Condensed', content: '<span style="font-family: Roboto Condensed">Roboto Condensed</span>' }
        ]

text: {
    type: 'content-editable',
    label: 'Text',
    group: 'text',
    index: 1
},
'font-family': {
    type: 'select-box',
    options: dynamicOptions,
    label: 'Font family',
    group: 'text',
    when: { ne: { 'attrs/text/text': '' }},
    index: 3
},

仅当文本框具有非空值时才会显示输入字体系列选择框。 dynamicOptions 上的选项必须对输入类型有效。

Answer 3

经过多年的努力，我终于想出了一个让它工作的方法，而且确实非常简单快速。

这就是我如何创建一个选择框，其值会根据数组ruleInspectorArray（在我的代码的不同部分填充）的内容动态变化：

当创建一个新链接并创建它的检查器时，我在函数createInspector 内部设置了选择框的选项为ruleInspectorArray 的内容：

cell.set('myArrayOfOptions', ruleInspectorArray);

为了使其正常工作，我们还必须通过这样做将 ouf 选择框选项的路径设置为这个 ruleInspectorArray：

'tr_rules': { type: 'select', options: 'myArrayOfOptions', group: 'attributes', label: 'Rule', index: 3 },

是的，是的，是的.... :)