Wie jquery ui Verhalten in Meteor richtig zu binden?

Question

Ich versuche, eine Gruppe von ziehbaren DOM-Objekten mit .draggable() von jQuery UI zu erstellen, die durch Meteor-Abonnements gefüllt werden. Der Code, den ich mit Blicken wie

kam

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

Diese entspricht mit einigen Meteor.publish() Anrufen, so dass jedes Mal, wenn die Sammlung Änderungen, die .draggable() Verhalten angebracht werden. Zumindest war das meine Absicht.

Allerdings funktioniert es nur einmal - sobald einer dieser <li> Drag-and-Drop-Vorgänge ausgeführt wurde, sind sie nicht mehr ziehbar.

Wenn die Objekte fallen gelassen werden, ich bin Brennen ein benutzerdefiniertes Ereignis, das wie so zum Template für das Element angebracht ist

$("#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' }}); 
     } 
    }; 

So ist mein Denken, dass diese Änderung an der Sammlung auf Tropfen ausbreiten sollte durch den Pub/Sub-Prozess und führen Sie die .draggable() Zeile oben. Aber es scheint nicht zu sein.

Der vollständige Code für das hier zu sehen ist https://github.com/sbeam/in-out/blob/master/client/inout.js und die App ist bei http://inout.meteor.com/ (es gibt einige andere wahrscheinlich nicht verwandten Fragen mit Gegenständen zufällig Werte oder verschwinden aus dem UI ganz zu verlieren)

Also, wenn mein Verständnis von Wie Pub/Sub arbeitet in Meteor ist aus, es wäre gut zu wissen. Oder gibt es eine effizientere Möglichkeit, diese Bindung für das UI-Verhalten zu erzielen, die ohne sie funktioniert?

Answer 1

Die Art, wie ich dies in meinen Apps implementiert habe, ist mit der Methode @lashleigh.

Ich habe eine Vorlage Ereignis, das unter Verwendung von Code wie folgt hört:

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

Dann höre ich den Dragstop so.

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

Sie die App sehen können, die diesen Code bei aduno.meteor.com