Ember.js路由和jQueryUIDraggable混合元素互相干扰



我已经连续两天对此感到头疼,我需要一些关于如何找到这个问题根源的建议。希望有人(你,也许在读这篇文章?)遇到了类似的问题,你可以提供一些帮助。

我的应用程序有一些东西可以通过具有该名称的jQueryUI小部件进行拖动。在我使用Ember的路由在应用程序中导航之前,这真的很好。当刷新UI并重新生成可拖动项目中及周围的内容时,会发生一些事情。

那么,会发生什么呢

在对UI进行路由重绘后,当鼠标指针位于应该在其顶部拖动的图像元素上时,可拖动的div最显著地不会更新其位置。动作也很不稳定,这看起来是因为直到指针在可拖动的div之外,位置才更新。此外,拖动会被卡住,释放鼠标按钮后div继续跟随鼠标。

更新

我一直在为jQueryUI鼠标添加断点,这是draggable所依赖的鼠标事件处理程序。当它检测到鼠标向下和向上事件时,我发现在拖动时没有注册向上事件。事实上,在路由后重新渲染的div中单击任何位置都不会注册向下或向上事件。

我只是不知道我能做些什么来搅乱鼠标听众。

更新2

我一直在研究老鼠事件兔子洞,并提出了以下内容。Ember.js上有一个已关闭的问题,与jQuery UI鼠标无法捕捉到文档中的事件有关。因此,我在提到的位置放入了一些日志行,以查看发生了什么。我只登录mouseDOwn事件,以避免淹没控制台。

我看到的是,在Ember内路由导航之前,整个Ember层次结构为事件返回一个未定义的管理器。不过,在路由之后,其中一个视图返回null,这会立即停止冒泡。即使是Ember应用程序根目录下的ApplicationView也没有发言权,更不用说文档节点上的jQuery UI了。

不过,原因是返回null很奇怪。这是因为它正在检查的视图不在Ember内部保存的视图列表中。它显然存在于DOM中,但不知何故在某个时刻没有注册或未注册。

狩猎仍在继续。。。

我对此做了什么

我让jQuery draggable成为一个混合,而不是"手动"调用它

我遵循了这个SO问题和github上的相关代码,使jQueryUI以更集成的方式创建和销毁观察者。尽管如此,它的工作原理与之前完全相同。

我卸载并禁用了该应用程序使用的所有其他javascript库

我有一些画布绘画的东西在那里,我删除了测试。

我尽可能多地删除了UI层次结构

我把ember应用程序直接放在了主体下面,还让应用程序视图"无标记",以改变和减少可拖动bug的深度。我甚至短路了一个直接连接到应用程序视图出口而不是子视图出口的整个视图级别。

我把导航的一部分做成了可拖动的

我做了一些导航项目,在路由时不刷新,可拖动。。。它们在绕了一圈后继续拖动。

我在另一个Ember应用程序中让事情变得可拖动

这个问题不会出现在同一Rails项目中的另一个Ember应用程序中(相同的css和基本html,javascript)。我让应用程序中的一些随机按钮和东西可以拖动,并像疯了一样"路由",它们总是可以继续拖动。某种特定于结构或UI层次结构的东西似乎导致了它

当然,我还记录了许多回调和切换浏览器

为了确保在删除适当的UI元素时,事情被正确地分解,我一直在记录大量的事情来跟踪每条日志行,以确保它看起来是正确的。最新的Safari、Chrome和Firefox也出现了同样的情况。

为什么要责怪Ember和Draggable

我有一个原型形式的应用程序作为TangledMessOfJavascript™应用它做了同样的事情。将DOM的一部分替换为导航,使用Draggable和相同的基本UI层次结构(除了一些Ember鼓励的东西)。

JS小提琴怎么样

尽管我在寻求建议,但我真的不想试图从这个无关紧要的应用程序层次结构中产生混乱。我不是想偷懒。我真的需要一整天的时间来处理这个问题,部分原因是这是一个工作中的应用程序,其中包含一些我认为无法分享的东西,但主要原因是这不是一个微不足道的走投无路的问题,我只能做一个简单的测试用例。

我想要什么

我不是在寻找一个神奇的唯一。。。我很想得到一些关于我如何追踪这件事的建议。我倾向于某个胭脂事件的听众或其他一些古怪的人。我还没有找到调试这种事情的好方法。

在Ember.js上这个已关闭的问题的指导下,我设法发现问题是在outlet中使用具有静态elementId的Views。在路由之间转换时,Ember先注册下一个视图实例,然后再从Ember的全局视图哈希中取消注册旧视图实例。如果两个视图都有相同的ID,用作哈希中的密钥,这将导致该视图从此哈希中丢失。这反过来又会导致任何冒泡事件安静地停止。在我的情况下,在这个视图中的任何鼠标点击都会被EventManager吞噬,而不会在层次结构中冒泡。

我在github上创建了一个问题,以了解这是一个但是还是一个已知的限制。https://github.com/emberjs/ember.js/issues/1553

最新更新