Ember.js + jQuery UI可拖动克隆

Question

我试图将Ember.js与jQuery UI的可拖动功能结合使用,但我遇到了问题.具体来说,当使用克隆助手时,我无法删除元素,一切都非常滞后.如果我不使用克隆助手,一切都按预期工作.

我怀疑这与jQuery UI克隆html有关,包括所有的变形脚本标签(用于绑定).

我拖动它时不需要更新元素.有没有办法剥离绑定标签与ember？

作为参考,这里是视图逻辑:

didInsertElement: ->
  @_super()
  @$().draggable
    cursor: 'hand'
    helper: 'clone'
    opacity: 0.75
    scope: @draggableScope
  @$().droppable
    activeClass: 'dropActive'
    hoverClass: 'dropHover'
    drop: @createMatch
    scope: @droppableScope

我的第一个想法是尝试使用a beginPropertyChanges并endPropertyChanges在拖动期间防止意外行为.这似乎不起作用,也不是理想的,因为我希望其他绑定更新.以下是我尝试过的修改后的代码:

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

任何帮助将不胜感激.

Answer 1

我通过手动剥离所有与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()