は私が動的にjointJSに私の検査官の選択オプションを変更することができます - Rappid

Question

を私inspector.jsでは、私は2つのオプションを選択している名前tr_rulesと、この選択ボックス宣言している：

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

を私が定義することができますどのような方法があります私のインスペクタを正しく設定すると、配列のオプションは最初は空になります。

varの内容でオプションを動的に入力しますか？各リンクの

var optionsVariable = [myDynamicOption1, myDynamicOption2, myDynamicOption3]; 

Answer 1

我々はmarker-source.fill属性のランダムな値を取得します：

をこれがその一部であることになる特定の時間var optionsVariableと例えば

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の内容に応じて動的に変化する値で選択ボックスを作成する方法を次のとおりです。新しいリンクが作成され

とそのインスペクタ作成されたとしても、私はruleInspectorArrayの内容であることを機能createInspector内の選択ボックスのオプションを設定します。

cell.set('myArrayOfOptions', ruleInspectorArray); 

それは、我々はまた、そうすることによって、このruleInspectorArrayさouf選択ボックスのオプションのパスを設定する必要が働くようにするために：

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

はい、はい、はい.... :)