Kann ich dynamisch die Auswahlmöglichkeiten meines Inspektor in jointJS ändern - RAppID

Question

Ich habe dieses Auswahlfeld mit dem Namen tr_rules deklariert In meinem inspector.js die 2 wählen Optionen:

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

Gibt es eine Möglichkeit definiere ich meine Inspektor richtig, so dass die Array-Optionen zunächst leer sind und:

Ich fülle die Optionen dynamisch mit dem Inhalt einer var?

Zum Beispiel mit dem var optionsVariable, die eine bestimmte Zeit sein wird:

var optionsVariable = [myDynamicOption1, myDynamicOption2, myDynamicOption3]; 

Answer 1

Für jede Verbindung wir Zufallswerte für die marker-source.fill Attribut erhalten wird: von

Dies ist der Teil die KitchenSink-Demoanwendung (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)); 
}, 

die App.config.inspector hat Definitionen für den Inspektor in separaten Datei

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

In Inspektor Ihre Optionen, um die Variable Sie wollen.

, wenn Sie die Möglichkeit, mit einer Abhängigkeit angezeigt werden mögen, können Sie dies auch mit dem wenn Anstand zum Beispiel

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

wird das Eingang font-family Auswahlfeld nur angezeigt werden, wenn das Textfeld ein hat nicht leerer Wert. Die Optionen in den dynamicOptions müssen für den Eingabetyp gültig sein.

Answer 3

Nachdem ich für eine Ewigkeit gekämpft habe, habe ich endlich einen Weg gefunden, es zum Laufen zu bringen, und es ist in der Tat ziemlich einfach.

Dies ist, wie ich eine Auswahlbox mit Werten erzeugen kann, die dynamisch auf den Inhalt des Arrays gemäß ändern ruleInspectorArray (die in einem anderen Teil meines Codes gefüllt ist):

Wenn eine neue Verbindung erstellt wird und dessen Inspektoren auch erstellt wird ich in Funktion createInspector die Möglichkeiten der Auswahlbox der Gehalt an ruleInspectorArray zu sein:

cell.set('myArrayOfOptions', ruleInspectorArray); 

um damit arbeiten müssen wir auch den Weg der ouf selectbox Optionen diese ruleInspectorArray durch so tun :

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

Ja, Ja, Ja .... :)