jak prawidłowo powiązać zachowania jquery ui w meteodzie?

Question

Próbuję utworzyć grupę przeciągalnych obiektów DOM za pomocą interfejsu użytkownika jQuery UI: .draggable(), które są zapełniane przez subskrypcje Meteor. Kod wymyśliłem wygląda jak

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

te odpowiadają niektórych Meteor.publish() połączeń, tak że za każdym razem zmienia się zbieraniem, zachowanie .draggable() zostanie dołączony. Przynajmniej taka była moja intencja.

Jednak działa tylko raz - po przeciągnięciu i upuszczeniu jednego z nich <li> nie można już ich przeciągać.

Kiedy obiekty są odrzucane, jestem wypalania zdarzenia niestandardowego, który jest dołączony do Template dla rzeczy jak tak

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

Więc moje myślenie jest, że ta zmiana w kolekcji na spadku powinna propagować przez proces pub/sub i ponownie uruchom powyższą linię .draggable(). Ale tak się nie wydaje.

Kompletny kod ten można zobaczyć tutaj https://github.com/sbeam/in-out/blob/master/client/inout.js a aplikacja jest na żywo w http://inout.meteor.com/ (istnieje kilka innych prawdopodobnie niepowiązanych problemy z przedmiotów losowo utraty wartości lub znikają z interfejsu łącznie)

Więc jeśli moje rozumienie jak działa pub/sub w Meteorze, dobrze by było wiedzieć. Czy istnieje skuteczniejszy sposób osiągnięcia tego powiązania zachowania interfejsu użytkownika, które działa bez niego?

Answer 1

Sposób, w jaki to zaimplementowałem w moich aplikacjach, to metoda przedstawiona przez @lashleigh.

Mam szablon, który nasłuchuje zdarzenia za pomocą kodu:

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

Potem nasłuchiwać dragstop takiego.

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

Można zobaczyć aplikację, która używa tego kodu na aduno.meteor.com