2

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

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

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

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

例如，var optionsVariable 特定时间将是：

var optionsVariable  = [myDynamicOption1, myDynamicOption2, myDynamicOption3];
4

3 回答 3

3

对于每个链接，我们将获得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',
// ...
于 2017-02-21T14:35:21.387 回答
1

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

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

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

cell.set('myArrayOfOptions', ruleInspectorArray);

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

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

对对对.... ：）

于 2017-08-01T14:13:27.883 回答
1

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

如果您想使用依赖项显示选项，您也可以使用 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 上的选项必须对输入类型有效。

于 2017-02-22T22:06:15.360 回答