Как правильно привязать поведение jquery ui в метеор?

Question

Я пытаюсь создать группу перетаскиваемых объектов DOM с использованием jQuery UI's .draggable(), которые заполняются через подписки Meteor. Код, который я придумал, как выглядит

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

Они соответствуют некоторым Meteor.publish() звонков, так что в любое время изменения коллекции, .draggable() поведения будет приложены. По крайней мере, это было моим намерением.

Однако он работает только один раз - когда один из этих <li> был перетаскиван, то они больше не перетаскиваются.

Когда объекты отбрасываются, я запуская пользовательское событие, которое прилагается к Template для элемента, как так

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

Итак, мое мышление, что это изменение в коллекции на капли должны распространяться через паб/подпроцесс и повторно запустить линию .draggable() выше. Но это не похоже.

Полный код для этого можно увидеть здесь https://github.com/sbeam/in-out/blob/master/client/inout.js и приложение жить в http://inout.meteor.com/ (есть и другие, вероятно, не связанные между собой вопросы с пунктами случайно проигрышным значение или исчезающим из пользовательского интерфейса в целом)

Так что, если мое понимание как паб/суб работает в Метеор отключен, было бы хорошо знать. Или существует более эффективный способ достижения этой привязки поведения пользовательского интерфейса, который работает без него?

Answer 1

Способ, которым я реализовал это в своих приложениях, - это метод, показанный @lashleigh.

У меня есть событие шаблон, который прослушивает используя такой код:

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

Тогда я слушаю для dragstop как это.

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

Вы можете увидеть приложение, которое использует этот код на aduno.meteor.com