Ember.js + jQuery UI Draggable Clone

Sto cercando di utilizzare Ember.js insieme alla funzionalità trascinabile dell'interfaccia di jQuery, ma sto riscontrando problemi. In particolare, quando si utilizza l'helper clone, non riesco a rilasciare l'elemento e tutto è estremamente laggoso. Se non utilizzo l'helper clone, tutto funziona come previsto.Ember.js + jQuery UI Draggable Clone

Sospetto che ciò sia relativo all'interfaccia utente di jQuery che clona l'html, inclusi tutti i tag di script metamorfici (utilizzati per il binding).

Non ho bisogno di aggiornare l'elemento dal vivo mentre lo sto trascinando. C'è un modo per rimuovere i tag vincolanti con la brace?

Per avere un riferimento, qui è la logica vista:

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

Il mio primo pensiero è stato quello di cercare di utilizzare un beginPropertyChanges e endPropertyChanges durante il trascinamento per evitare un comportamento imprevisto. Questo non sembra funzionare, né è l'ideale come vorrei che altri binding si aggiornassero. Ecco il codice revisionato in cui ho tentato di farlo:

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

Qualsiasi aiuto sarebbe molto apprezzato.

fonte

2012-01-10 ghempton

L'ho risolto eliminando manualmente tutti i metadati correlati a brace. Ecco un piccolo plugin per jQuery ho incitato:

# 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

Per farlo funzionare, è sufficiente impostare l'helper come segue:

helper: -> 
    $this.safeClone()

fonte

2012-01-10 02:50:23 ghempton

Così come si fa riattivare vincolante dopo? O non ti importa di quello? –

l'associazione è disabilitata solo nell'elemento clonato utilizzato per l'helper di trascinamento. L'elemento originale rimane intatto – ghempton

Ah, ti ho preso. Beh, non riesco a pensare a qualcosa di costruito per fare ciò che stai cercando di fare allora. Quello che hai sembra una soluzione pulita per me. –

ho avuto lo stesso problema con Ember 1.0.0 RC6. Ho trovato che basta sostituire la stringa clone con una funzione che restituisce il clone funziona bene.

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

In CoffeeScript

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

fonte

2013-07-19 03:01:13 EasyCo

Ember.js + jQuery UI Draggable Clone

risposta

Problemi correlati