Ember.js路由和jQuery UI Draggable mixin与每个其他 [英] Ember.js routing and jQuery UI Draggable mixin messing with each-other

问题描述

我一直在打击我的头两天，现在我需要一些关于如何追踪这个问题根源的建议。希望有人（你也许读这个？）有一个类似的问题，可以提供一些帮助。

我的应用程序有一些东西可以通过jQuery UI widget拖动用这个名字这很好，直到我使用Ember的路由导航到应用程序。当UI被刷新并且可拖动项目中和周围的东西被重新生成时，会发生什么。

那么会发生什么？

在UI的路由重绘之后，当鼠标指针在图像元素上方时，可拖动的div最显着地不会更新它们的位置，因为它们应该在其上方被拖动。这个动作也很干，看起来像是由于位置没有更新直到指针在draggable div之外。此外，拖放被卡住，鼠标按钮释放后继续按住鼠标。

更新

我已经向jQueryUI鼠标添加了断点，这是draggable所依赖的鼠标事件处理程序。当它检测到鼠标和鼠标向上事件时，断开它，当我拖动时，我看到没有注册的事件。实际上，点击路由后重新呈现的div中的任何地方都不会注册下来或向上的事件。

我只是不知道我可以做什么来搞砸鼠标监听器

更新2

我一直在关闭鼠标事件兔洞，下列。 Ember.js上的一个封闭的问题与事件不相关该文档为jQuery UI Mouse抓住它。所以我在提到的位置放入一些日志行，看看发生了什么。我只登录mouseDOwn事件以避免淹没控制台。

我看到的是，在Ember路由导航之前，整个Ember层次结构返回一个未定义的事件管理器。路由后，其中一个视图返回null，立即停止冒泡。甚至在Ember应用程序的根目录下的ApplicationView也不用说文件，更不用说文档节点上的jQuery UI。

原因是返回null是奇数，但是。这是因为它正在检查的视图不在Ember内部保留的视图列表中。这显然是在DOM中，但是某种程度上没有被注册或被注册。

追踪继续...

我做了什么？

我使jQuery拖动混合，而不是手动调用它

我遵循这个SO问题和 github上的相关代码

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

/ p>

我删除了尽可能多的UI层次结构，因为我可以

我将ember应用程序直接放在正文之下，并使应用程序视图无标签更改和减少错误拖动内容发生的深度。我甚至短短一个整体视图级别直接连接到应用视图的插座，而不是子视图的插座。

我制作了导航draggable的部分

我做了几个导航项目，当路由，拖动时不刷新...他们继续拖动，因为他们应该在路由后。

我在另一个Ember应用程序中可以拖动事件

同一个Rails项目中的另一个Ember应用程序中不会出现此问题（相同的css和基本html， JavaScript的）。我做了一些随机的按钮和东西在那个应用程序拖拉和路由像疯狂，他们总是继续拖动，因为他们应该。某些特定于结构或UI层次结构的东西看起来会导致它。

当然，我也记录了无数回调和切换浏览器

为了确保在删除相应的UI元素时正确地拆除了这些内容，我已经记录了一些可追溯到每个日志行的事情，以确保它看起来像正确的事情发生。在最新的Safari，Chrome和Firefox中也是如此。

为什么责怪Ember和Draggable？

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

JS小提琴如何？

即使我要求建议，我真的不想尝试从这个非平凡的应用层次结构中产生一个小提琴。我不想懒惰。这将严重影响我一整天的时间，这部分原因是因为它是一个在工作的应用程序，其中包含一些我不认为我可以分享的东西，但主要是因为它不是一个微不足道的角落问题我可以做一个简单的测试用例。

我想要什么？

我不是在寻找某人魔术般的唯一这个...我想要得到的是关于如何跟踪这一点的一些建议。我倾向于一些胭脂事件听众或其他一些奇怪的事情。我没有找到调试这种东西的好方法。

解决方案

引导者 Ember.js上的这个封闭的问题，我设法发现问题是在出口中使用带有static elementId的视图。当在路由之间转换时，Ember注册下一个视图实例，然后从Ember的全局视图哈希中取消注册旧的实例。 SInce两个视图具有相同的ID，用作散列中的键，这将导致视图在此散列中丢失。这反过来会导致任何事件冒泡静静地停止。在我的情况下，这个视图中的任何鼠标点击都将被EventManager吞没，而不会让层次结构浮起来。

我在github上创建了一个问题，一个或一个已知的限制。
https://github.com/emberjs/ember.js/issues/1553

I have been banging my head against this for 2 days solid now and I need some advice on how to track down the root of this problem. Hopefully someone (you, reading this perhaps?) has had a problem similar enough that you can offer some help.

My app has a few things draggable via the jQuery UI widget with that name. This works really well until I navigate inside the app using Ember's routing. Something happens when the UI is refreshed and the things in and around the draggable items are re-generated.

So, what happens?

After a routing redraw of the UI, the draggable divs most significantly do not update their position when the mouse pointer is over the image element that they are supposed to be dragged around on top of. The motion is also jerky which looks like it is due to the position not updating until the pointer is outside of the draggable div. Also the dragging gets stuck and the div continues to follow the mouse after the mouse-button is released.

Update

I have been adding breakpoints to jQueryUI Mouse, the mouse event handler that draggable relies on. Breaking when it detects a mouse down and mouse up event I see that there is no up event registered when I drag. In fact, clicking anywhere in the div re-rendered after routing does not register either down or up events.

I just have no idea what I can be doing to mess up the mouse listeners.

Update 2

I have kept going down the mouse event rabbit hole and come up with the following. There is a closed issue on Ember.js related to events not bubbling up to the document for jQuery UI Mouse to catch it. So I put in some log lines in at the location mentioned to see what was going on. I only log on mouseDOwn events to avoid flooding the console.

What I see is that before an in-Ember routed navigation the entire Ember hierarchy returns an undefined manager for the event. After routing though, one of the views return null which immediately halts the bubbling. Not even the ApplicationView at the root of the Ember app gets to have a say, let alone jQuery UI on the document node.

The reason is returns null is odd, though. It is because the view it is checking is not in the list of views Ember keeps internally. It is clearly there in the DOM but has somehow not been registered or been unregistered at some point.

The hunt continues...

And what have I done about it?

I made jQuery draggable a mixing instead of calling it "manually"

I followed this SO question and the associated code on github to make jQuery UI create and destroy observers in a more integrated fashion. Works exactly the same as before this re-factoring though.

I unloaded and disabled all other javascript libraries used by the app

I had some canvas drawing stuff in there which I removed for testing.

I removed as much of the UI hierarchy as I could

I put the ember app directly under the body and also made the app view "tag-less" to change and reduce the depth at which the buggy draggable stuff happens. I even short-circuited one whole view level connecting directly to the app view's outlet and not to a sub-view's outlet.

I made parts of the navigation draggable

I made a few nav items, that do not refresh when routing, draggable... they continue to drag as they should after routing around.

I made things draggable in another Ember app

This problem does not occur in another Ember app inside the same Rails project (same css and base html, javascript). I made some random buttons and things in that app draggable and "routed" around like crazy and they always continued to be draggable as they should. Something specific to the structure or UI hierarchy looks to be causing it.

Of-course, I also logged numerous callbacks and switched browsers

To ensure that things were being torn down correctly when the appropriate UI elements are removed I have been logging a ridiculous number of things tracing each log line to ensure it looks like the right things happen. The same occurs in the latest Safari, Chrome and Firefox.

Why blame Ember and Draggable?

I had this application in prototype form as a TangledMessOfJavascript™ application. It did all the same things. Replacing parts of the DOM as navigation, using Draggable and the same basic UI hierarchy (except for some Ember-encouraged stuff).

How about a JS fiddle?

Even though I am asking for advice I really like to not try to generate a fiddle from this non-trivial app hierarchy. I am not trying to be lazy. It would seriously take me a full day to make a fiddle of this partly because it is an at-work-app which contains some things I don't think I can share, but mostly just because it is not a trivial cornered-off problem I can just make a simple test case.

What do I want?

I am not looking for someone to magically sole this... What I would love to get is some suggestions on how the heck I track this down. I am leaning towards some rouge event listener or some other oddity. I have not found a good way to debug this kind of thing.

解决方案

Guided by this closed issue on Ember.js, I managed to find out that the problem is using Views with static elementId in outlets. When transitioning between routes Ember registers the next view instance before un-registering the old one from Ember's global views hash. SInce both views have the same ID, used as the key in the hash, this will cause the view to be missing from this hash. This in turn will cause any event bubbling to halt silently. In my case, any mouse clicks inside this view would be swallowed by the EventManager and not bubble up the hierarchy.

I created an issue on github to find out if this is a but or a known limitation. https://github.com/emberjs/ember.js/issues/1553

这篇关于Ember.js路由和jQuery UI Draggable mixin与每个其他的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！