Могу ли я динамически изменять параметры выбора моего инспектора в 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 имеет определения для инспектора в отдельном файле

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

В инспекторе установить параметры для переменной, которую вы хотите.

, если вы хотите, чтобы отобразить параметры, используя зависимость вы также можете сделать это с уместности когда например

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 }, 

Да, да, да .... :)