Ember.js + jQuery UI 可拖动克隆 [英] Ember.js + jQuery UI Draggable Clone
问题描述
我正在尝试将 Ember.js 与 jQuery UI 的可拖动功能结合使用,但我遇到了问题.具体来说,当使用 clone 助手时,我无法删除元素和所有内容非常滞后.如果我不使用克隆助手,一切都会按预期进行.
I am trying to use Ember.js in conjunction with jQuery UI's draggable functionality, but I am encountering problems. Specifically, when using the clone helper, I am not able to drop the element and everything is extremely laggy. If I don't use the clone helper, everything works as expected.
我怀疑这与 jQuery UI 克隆 html 有关,包括所有变形脚本标签(用于绑定).
I suspect this is related to jQuery UI cloning the html, including all of the metamorph script tags (used for binding).
我在拖动元素时不需要实时更新元素.有没有办法用 ember 去除绑定标签?
I don't need to update the element live while I am dragging it. Is there a way to strip binding tags with ember?
作为参考,这里是视图逻辑:
For reference, here is the view logic:
didInsertElement: ->
@_super()
@$().draggable
cursor: 'hand'
helper: 'clone'
opacity: 0.75
scope: @draggableScope
@$().droppable
activeClass: 'dropActive'
hoverClass: 'dropHover'
drop: @createMatch
scope: @droppableScope
我的第一个想法是在拖动过程中尝试使用 beginPropertyChanges
和 endPropertyChanges
以防止出现意外行为.这似乎不起作用,也不理想,因为我希望其他绑定更新.这是我尝试过的修改后的代码:
My first thought was to try and use a beginPropertyChanges
and endPropertyChanges
during the drag to prevent an unexpected behavior. This doesn't seem to work nor is it ideal as I would like other bindings to update. Here is the revised code where I attempted this:
didInsertElement: ->
@_super()
@$().draggable
cursor: 'hand'
helper: 'clone'
opacity: 0.75
scope: @draggableScope
start: ->
Ember.beginPropertyChanges()
stop: ->
Ember.endPropertyChanges()
@$().droppable
activeClass: 'dropActive'
hoverClass: 'dropHover'
drop: @createMatch
scope: @droppableScope
任何帮助将不胜感激.
推荐答案
我通过手动剥离所有与 ember 相关的元数据来实现这一目标.这是我创建的一个小型 jquery 插件:
I got this working by stripping all ember related metadata manually. Here is a small jquery plugin I whipped up:
# Small extension to create a clone of the element without
# metamorph binding tags and ember metadata
$.fn.extend
safeClone: ->
clone = $(@).clone()
# remove content bindings
clone.find('script[id^=metamorph]').remove()
# remove attr bindings
clone.find('*').each ->
$this = $(@)
$.each $this[0].attributes, (index, attr) ->
return if attr.name.indexOf('data-bindattr') == -1
$this.removeAttr(attr.name)
# remove ember IDs
clone.find('[id^=ember]').removeAttr('id')
clone
要让它工作,只需将助手设置如下:
To get it to work, just set the helper as follow:
helper: ->
$this.safeClone()
这篇关于Ember.js + jQuery UI 可拖动克隆的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!