Ember.js + jQuery UI可拆分克隆 [英] Ember.js + jQuery UI Draggable Clone

问题描述

我正在尝试使用Ember.js和jQuery UI的可拖动功能，但我遇到问题。具体来说，当使用克隆帮助者时，我无法删除元素和所有内容是非常滞后。如果我不使用克隆帮助器，一切都会按预期方式工作。

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有关，包括所有的metamorph脚本标签用于绑定）。

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屋！