Ember.js + jQuery UI Draggable Clone

Question

Próbuję użyć Ember.js w połączeniu z funkcją przeciągania interfejsu jQuery UI, ale napotykam problemy. W szczególności, gdy używam pomocnika clone, nie jestem w stanie upuścić elementu i wszystko jest bardzo opóźnione. Jeśli nie używam pomocnika klonowania, wszystko działa zgodnie z oczekiwaniami.

Podejrzeń, że jest to związane z jQuery UI klonowania html, w tym wszystkie metamorficzne znaczniki skryptu (używane do wiązania).

Nie muszę aktualizować elementu na żywo podczas przeciągania go. Czy istnieje sposób na usuwanie tagów wiążących z ember?

Dla porównania, tutaj jest logika widok:

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

Moją pierwszą myślą było, aby spróbować użyć beginPropertyChanges i endPropertyChanges podczas przeciągania w celu zapobieżenia nieoczekiwane zachowanie. To nie działa, ani nie jest idealne, ponieważ chciałbym zaktualizować inne wiązania. Oto poprawiony kod, w którym podjąłem próbę:

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 

Każda pomoc zostanie bardzo doceniona.

Answer 1

Mam to działa poprzez ręczne usunięcie wszystkich metadanych związanych z emberem. Oto mały jquery plugin I bita:

# 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 

Aby zmusić go do pracy, wystarczy ustawić pomocnika następująco:

helper: -> 
    $this.safeClone() 

Answer 2

miałem ten sam problem przy użyciu Ember 1.0.0 RC6. Odkryłem, że samo zastąpienie łańcucha klonowego funkcją, która zwraca klona, ​​działa dobrze.

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

W coffeescript

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