在Ember.js應用程序中使用jsPlumb

我想了解如何在我的Ember.js應用程序中使用jsPlumb，因此我將最小jsFiddle放在一起以展示它們如何一起工作。在Ember.js應用程序中使用jsPlumb

在這個例子中，我只是插入節點並將它們添加到jsPlumb。我還沒有在它們之間添加任何鏈接。在這個階段，節點應該是draggable但它們不是。

錯誤，我得到的瀏覽器控制檯：

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); 
}

你可以看到一個simple example而不Ember.js作品融合如預期。我知道這個版本的jsPlumb我使用jquery-ui克隆元素並支持拖放。 A post here顯示在Ember中存在jquery-ui可拖動功能的問題。但是，我不確定我是否遇到同樣的問題。如果這是我遇到的同樣的問題，我將不勝感激在如何實施我的應用程序中建議的解決方案的一些幫助。我對Ember和jsPlumb都是新手，所以我希望能明確指導一下這裏發生了什麼以及採取什麼樣的路徑。

我該如何讓這個例子工作？

來源

2012-09-23 Aras

幸運的是，我的懷疑是錯誤的，這個問題不是與metamorph。 jsPlumb和Ember一起工作得很好，沒有任何黑客。我放了一些example in this jsFiddle，表明他們如何一起工作。

感謝Simon Porritt幫助我在jsPlumb用戶組發現問題。我錯過的是一個簡單的電話jsPlumb.draggable element。但是，此修復後，上述錯誤仍然存在。

上面的特定錯誤消息是Ember調用didInsertElement一個額外的時間與一個元素，它沒有到達DOM的結果。我已經報道了這個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"

希望這可以幫助別人。

來源

2012-09-24 04:10:34 Aras

在Ember.js應用程序中使用jsPlumb

回答

相關問題