2

Ember.jsアプリケーションでjsPlumbを使用する方法を学習しようとしているので、最小限のjsFiddleをまとめて、それらがどのように連携するかを示します。

ここまでの例では、ノードを挿入して jsPlumb に追加しただけです。それらの間のリンクはまだ追加していません。この段階では、ノードはドラッグ可能である必要がありますが、そうではありません。

ブラウザ コンソールに次のエラーが表示されます。

TypeError: myOffset is null

これは、jsPlumb のコードのこの部分を指しています。

for (var i = 0; i < inputs.length; i++) {
    var _el = _getElementObject(inputs[i]), id = _getId(_el);
    p.source = _el;
    _updateOffset({ elId : id });
    var e = _newEndpoint(p);
    _addToList(endpointsByElement, id, e);
    var myOffset = offsets[id], myWH = sizes[id];
    var anchorLoc = e.anchor.compute( { xy : [ myOffset.left, myOffset.top ], wh : myWH, element : e });
    e.paint({ anchorLoc : anchorLoc });
    results.push(e);
}

Ember.js と統合しない単純な例が期待どおりに機能することがわかります。私が持っているこのバージョンの jsPlumb は、jquery-ui を使用して要素を複製し、ドラッグ アンド ドロップをサポートしていることを知っています。ここの投稿は、Ember の jquery-ui ドラッグ可能機能に問題があることを示しています。ただし、同じ問題が発生しているかどうかはわかりません。それが私が抱えている問題と同じである場合は、そこで提案されたソリューションを私のアプリケーションに実装する方法について助けていただければ幸いです。私は Ember と jsPlumb の両方に慣れていないので、ここで何が起こっているのか、どのような道をたどるのかについて明確なガイダンスをいただければ幸いです。

この例を機能させるにはどうすればよいですか?

4

1 に答える 1

2

幸いなことに、私の疑いは間違っていて、問題はメタモルフではありませんでした。jsPlumbとEmberは、ハッキングなしで問題なく動作します。このjsFiddleに、それらがどのように連携できるかを示す小さな例を示します。

クレジットは、問題を特定するためにjsPlumbユーザーグループで私を助けてくれたSimonPorrittに与えられます。私が見逃していたのは、への単純な呼び出しでしたjsPlumb.draggable element。ただし、上記のエラーはこの修正後も持続しました。

上記の特定のエラーメッセージは、EmberがdidInsertElementDOMに到達しなかった要素を使用して余分な時間を呼び出した結果です。この問題を報告しました。回避策の1つは、jsPlumbを呼び出す前に、要素がDOMに組み込まれることを確認することです。jsFiddleでわかるようdidInsertElementに、エラーを取り除くためにこのコードをフックに追加しました。

elementId = this.get 'elementId'
element = $("#"+elementId)
if element.size() > 0
  console.log "added element", element
  jsPlumb.addEndpoint element, endpoint
  jsPlumb.draggable element
else
  console.log "bad element"

これが誰かを助けることを願っています。

于 2012-09-24T04:10:34.213 に答える