私はそれをクリックするとJointJSのリンクのラベルを更新するには？

Question

私はこれを少しでも苦労してきました。状況は次のとおりです。

グラフのリンクをクリックすると、リンクにあるラベルを変更できます。 これまで私ができることは、私が望むテキストを書くテキスト入力があるということです。そして、2つの要素を接続すると、私が作成するリンクはこのラベルを持ちますが、少しバグがあります（主に、リンクに必要なラベルを持つ要素を再度接続したり切断したりできます。

これは、どちらが適切な方法であるか分かっていてもわかりますが、私は考えていません（私は文書を見ています）。

これは私が持っているjsのコードです：

graph.on('change:source change:target', function(link) { 
    if (link.get('source').id && link.get('target').id) { 
     // both ends of the link are connected. 
     $('#link-input').css('display', 'block'); 
     link.attr('text/text', $('#link').val()); 
    } 
}); 

とさえ私はそれが関連していないと思い、HTMLはこの1つである：

<div id="link-input" class="form-group"> 
    <label for="description">Link Condition</label> 
    <textarea class="form-control" rows="5" id="link"></textarea> 
</div> 

だから私はアプローチと罰金がどうなりますか私はそのテキストインプットに書き込むとき、それは特にそのリンクをリフレッシュする（しかし何とか私は私が修正しているオブジェクトを手に入れるべきであることを知っている）。誰かが別のアプローチを知っていると言うと、私はこのようにしています。なぜなら、私は別の方法でやり方を知らないからです。あなたの注意のための

おかげで、私は

Answer 1

十分に明示することを願っています。その後pointerclickイベントを取るために、テキストボックスを開くリンクビュー

にpointerclickイベントをキャプチャすることができるようにする必要があります入力をリンク属性に保存します。

私は私のプロジェクト

1. 通常のリンクを拡張することにより、クレタ島の新しいリンクの似た何かをしたともリンクビューを拡張し、pointerclickイベントを上書きします。

   joint.shapes.deviceLink = joint.dia.Link.extend({ 
   
       vertexMarkup: [ 
        '<g class="marker-vertex-group" transform="translate(<%= x %>, <%= y %>)">', 
        '<circle class="marker-vertex" idx="<%= idx %>" r="1" />', 
        '</g>' 
       ].join(''), 
   
   
       defaults: joint.util.deepSupplement({ 
        type: 'deviceLink', 
        connection: { name: 'orthogonal' }, 
        attrs: { 
         '.connection': { stroke: '#fe854f', 'stroke-width': 6 }, 
         sourcePort:{text:''}, 
         targetPort:{text:''}, 
         '.link-tools .tool-remove circle': { r: 8, fill:'#fff',position: 0.5 }, 
         customLabel:{text:''}, 
        }, 
        labels: [ { position: 0.5, attrs: { text: { text: '' } } } ] 
       }, joint.dia.Link.prototype.defaults), 
       });  
   
   joint.shapes.deviceLinkView = joint.dia.LinkView.extend({ 
       pointerclick: function (linkview, evt, x, y){ 
       prompt for new label and change your label 
   this.model.label(0, { attrs: { text: { text: 'new label' } } }); 
       }, 
   });