Ember.js 응용 프로그램에서 jsPlumb 사용

Question

Ember.js 응용 프로그램에서 jsPlumb을 사용하는 방법을 배우려고합니다. 따라서 최소 함께 jsFiddle을 함께 사용하여 함께 작동하는 방법을 보여줍니다.

지금까지는 노드를 삽입하고 jsPlumb에 추가했습니다. 아직 그들 사이에 어떤 링크도 추가하지 않았습니다. 이 단계에서 노드는 drableable이어야하지만 그렇지 않습니다.

오류 나는 브라우저 콘솔에서 얻을 : jsPlumb의 코드의이 부분을 가리키는

TypeError: myOffset is null 

:

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 작품과의 통합없이 simple example 예상대로 jsPlumb의이 버전은 요소를 복제하고 드래그 앤 드롭을 지원하기 위해 jquery-ui를 사용한다는 것을 알고 있습니다. A post here은 Ember에서 jquery-ui 드래그 가능한 기능에 문제가 있음을 보여줍니다. 그러나, 나는 같은 문제를 겪고 있는지 확실하지 않다. 그것이 제가 가지고있는 것과 동일한 문제라면, 제 신청서에 제안 된 해결책을 구현하는 방법에 대한 도움을 주시면 감사하겠습니다. Ember와 jsPlumb을 처음 접했으니, 여기에서 무슨 일이 일어나고 어떤 경로를 취해야하는지에 대한 명확한 지침을 알려 주시면 감사하겠습니다.

이 예제를 어떻게 만들 수 있습니까?

Answer 1

운 좋게도 나의 의심은 잘못되었으며,이 문제는 metamorph가 아닙니다. jsPlumb과 Ember는 해킹없이 잘 작동합니다. 나는 그들이 함께 일할 수있는 방법을 보여주는 약간 example in this jsFiddle을 넣었다.

jsPlumb 사용자 그룹에서 문제를 확인하는 데 도움이 된 Simon Porritt에게 도움을드립니다. 내가 놓친 것은 jsPlumb.draggable element에 대한 간단한 호출이었다. 그러나 위의 오류가이 수정 후에 유지됩니다.

위의 특정 오류 메시지는 DOM에 연결하지 않은 요소가있는 여분의 시간 인 didInsertElement을 호출 한 Ember의 결과입니다. 나는 이것을 issue이라고보고했다. 한 가지 해결 방법은 요소가 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" 

희망이 있으면 도움이 될 것입니다.