Ember.js + jQuery UI 可拖动克隆

Question

我正在尝试将 Ember.js 与 jQuery UI 的可拖动功能结合使用，但我遇到了问题。具体来说，当使用 clone 助手时，我无法删除该元素并且一切都非常滞后。如果我不使用克隆助手，一切都会按预期进行。

我怀疑这与 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

我的第一个想法是在拖动过程中尝试使用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 1.0.0 RC6 时遇到了同样的问题。我发现只需用返回克隆的函数替换克隆字符串就可以了。

  this.$().draggable({
    // helper: 'clone'
    helper: function() {
      return $(this).clone();
    }
  });

在咖啡脚本中

@$().draggable
    # helper: 'clone'
    helper: ->
        $(@).clone()

Answer 2

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