come associare correttamente i comportamenti ui jquery in meteora?

Question

Sto cercando di creare un gruppo di oggetti DOM trascinabili utilizzando le interfacce utente di jQuery .draggable() che vengono popolate tramite gli abbonamenti Meteor. Il codice mi si avvicinò con un look come

Meteor.subscribe('those_absent', function() { 
    $("li.ui-draggable").draggable({ revert: "invalid" }); 
}); 
Meteor.subscribe('those_present', function() { 
    $("li.ui-draggable").draggable({ revert: "invalid" }); 
}); 

questi corrispondono con alcune Meteor.publish() chiamate, in modo che ogni volta che i cambiamenti di raccolta, verrà allegato il comportamento .draggable(). Almeno, quella era la mia intenzione.

Tuttavia, funziona solo una volta - una volta che uno di questi <li> è stato trascinato e rilasciato, quindi non sono più trascinabili.

Quando gli oggetti vengono eliminati, sto sparando un evento personalizzato che è collegato al Template per la voce in questo modo

$("#c_absent .inner-drop").droppable({ 
     drop: function(event, ui) { 
      ui.draggable.trigger('inout.leave'); 
     } 
    }); 


    Template.loftie_detail.events = { 
     'inout.leave': function (e) { 
      Lofties.update({_id:this._id}, {$set: {present: 'N' }}); 
     } 
    }; 

Quindi, il mio pensiero è che questo cambiamento alla raccolta su goccia dovrebbe propagarsi attraverso il processo pub/sub e rieseguire la riga .draggable() in alto. Ma non sembra.

Il codice completo per questo può essere visto qui https://github.com/sbeam/in-out/blob/master/client/inout.js e l'applicazione è dal vivo al http://inout.meteor.com/ (ci sono alcuni altri problemi probabilmente non imparentati con gli elementi in modo casuale perdere i valori che scompaiono o dall'interfaccia utente del tutto)

Quindi, se la mia comprensione della come funziona il pub/sub in Meteor, sarebbe bello saperlo. O c'è un modo più efficiente per raggiungere questo legame di comportamento dell'interfaccia utente che funziona senza di esso?

Answer 1

Il modo in cui l'ho implementato nelle mie app è con il metodo mostrato da @lashleigh.

Ho un evento modello che ascolta utilizzando il codice in questo modo:

Template.myDraggableItem.events({ 
    'mouseover .workItem' : function() { 
     $(this._id).draggable(); 
    } 
}); 

Poi ho ascoltare il DragStop come questo.

$('body').on('dragstop', '.myDraggableItem', function (e) { 
    // Update the collection with the new position 
}; 

Si può vedere l'applicazione che sta usando questo codice a aduno.meteor.com