Ember.js + jQuery UI Draggable Clone

J'essaie d'utiliser Ember.js en conjonction avec la fonctionnalité dragguable de jQuery UI, mais je rencontre des problèmes. Plus précisément, lorsque j'utilise l'assistant clone, je ne peux pas laisser tomber l'élément et tout est extrêmement décalé. Si je n'utilise pas l'assistant clone, tout fonctionne comme prévu.Ember.js + jQuery UI Draggable Clone

Je suppose que cela est lié à l'interface utilisateur jQuery clonant le code HTML, y compris toutes les balises de script métamorph (utilisées pour la liaison).

Je n'ai pas besoin de mettre à jour l'élément pendant que je le déplace. Y a-t-il un moyen de décaper les étiquettes de liaison avec du brai?

Pour référence, voici la logique de vue:

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

Ma première pensée était d'essayer d'utiliser un beginPropertyChanges et endPropertyChanges pendant la glisser pour éviter un comportement inattendu. Cela ne semble pas fonctionner et n'est pas idéal car je voudrais mettre à jour d'autres liaisons. Voici le code révisé où j'ai essayé ceci:

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

Toute aide serait grandement appréciée.

Source

2012-01-10 ghempton

J'ai obtenu ce travail en supprimant manuellement toutes les métadonnées liées aux braises. Voici un petit plugin jquery Je fouetté:

# 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

Pour le faire fonctionner, juste définir l'aide comme suit:

helper: -> 
    $this.safeClone()

Source

2012-01-10 02:50:23 ghempton

Alors, comment voulez vous réactivez ensuite la liaison? Ou ne vous en souciez-vous pas? –

La liaison est uniquement désactivée dans l'élément cloné utilisé pour l'assistant de glissement. L'élément d'origine reste intact – ghempton

Ahh vous avez. Eh bien, je ne peux pas penser à quelque chose de intégré pour faire ce que vous essayez de faire alors. Ce que vous avez ressemble à une solution propre à moi. –

Je faisais la même question à l'aide Ember RC6 1.0.0. J'ai trouvé que le simple fait de remplacer la chaîne clone par une fonction qui renvoie le clone fonctionne correctement.

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

Dans coffeescript

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

Source

2013-07-19 03:01:13 EasyCo

Ember.js + jQuery UI Draggable Clone

Répondre

Questions connexes