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中放了一个小例子,展示了它们如何协同工作。

归功于 Simon Porritt,他在 jsPlumb 用户组帮助我发现了问题。我缺少的是对jsPlumb.draggable element. 但是,上述错误在此修复后仍然存在。

上面的特定错误消息是 EmberdidInsertElement使用未进入 DOM 的元素调用额外时间的结果。我已经报告了这个问题。一种解决方法是在调用 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 回答