我尝试将 Ember.js 与 jQuery UI 的可拖动功能结合使用,但遇到了问题。具体来说,当使用clone时助手,我无法删除元素,一切都非常滞后。如果我不使用克隆助手,一切都会按预期工作。
我怀疑这与 jQuery UI 克隆 html 有关,包括所有 Metamorph 脚本标签(用于绑定(bind))。
我不需要在拖动元素时实时更新它。有没有办法用 ember 去除绑定(bind)标签?
作为引用,以下是 View 逻辑:
didInsertElement: ->
@_super()
@$().draggable
cursor: 'hand'
helper: 'clone'
opacity: 0.75
scope: @draggableScope
@$().droppable
activeClass: 'dropActive'
hoverClass: 'dropHover'
drop: @createMatch
scope: @droppableScope
我的第一个想法是在拖动过程中尝试使用 beginPropertyChanges
和 endPropertyChanges
来防止意外行为。这似乎不起作用,也不理想,因为我希望更新其他绑定(bind)。这是我尝试执行此操作的修改后的代码:
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 插件:
# 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
要使其正常工作,只需按如下方式设置助手:
helper: ->
$this.safeClone()
关于jquery-ui - Ember.js + jQuery UI 可拖动克隆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8797632/