Ember.js + jQuery UI Dragonable Clone

Question

Estoy tratando de usar Ember.js junto con la funcionalidad de jQuery UI, pero estoy teniendo problemas. Específicamente, cuando se utiliza el ayudante clone, no puedo soltar el elemento y todo es extremadamente lento. Si no uso el clon helper, todo funciona como se espera.

Sospecho que esto está relacionado con jQuery UI clonando el html, incluyendo todas las etiquetas de script metamorph (usadas para el enlace).

No necesito actualizar el elemento en vivo mientras lo estoy arrastrando. ¿Hay alguna manera de quitar las etiquetas de unión con brasas?

Para referencia, aquí es la lógica de la vista:

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

Mi primer pensamiento fue para tratar de utilizar un beginPropertyChanges y endPropertyChanges durante el arrastre para evitar un comportamiento inesperado. Esto no parece funcionar ni es ideal ya que me gustaría que se actualicen otros enlaces. Aquí está el código revisado donde intenté esto:

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 

Cualquier ayuda sería muy apreciada.

Answer 1

Esto funciona borrando todos los metadatos relacionados con las brasas manualmente. Aquí es un pequeño plugin jQuery que nos prepararon rápidamente:

# 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 

Para lograr que funcione, acaba de establecer el ayudante de la siguiente manera:

helper: -> 
    $this.safeClone() 

Answer 2

que estaba teniendo el mismo problema usando Ember 1.0.0 RC6. He encontrado que simplemente reemplazar la cadena de clon con una función que devuelve el clon funciona bien.

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

En CoffeeScript

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