如何在 Meteor 中正确地绑定 jQuery UI 行为？

Question

如何在 Meteor 中正确地绑定 jQuery UI 行为？

8

我正在尝试使用jQuery UI的.draggable()创建一个可拖动的DOM对象组，这些对象是通过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' }});
      }
  };

因此，我的想法是在放置收集项时，该更改应传播到pub/sub过程并重新运行上面的`.draggable()`代码行。但似乎并没有这样做。

完整的代码可以在这里查看https://github.com/sbeam/in-out/blob/master/client/inout.js，应用程序可在http://inout.meteor.com/上使用（还有一些其他可能与项目随机丢失值或从UI完全消失无关的问题）。

因此，如果我对Meteor中的pub/sub工作方式的理解存在偏差，那么了解这一点将是很好的。或者是否有更有效的方法来实现此UI行为绑定，而不需要使用它？

- sbeam

https://dev59.com/B2PVa4cB1Zd3GeqP53nW#bUoEoYgBc1ULPQZFPa2D - lashleigh

2

最近还有一个关于https://dev59.com/A2PVa4cB1Zd3GeqP-vqE的问题。我并不确定是否已经有一种干净、正确的方法来解决它，但很多人都有一些技巧。 - lashleigh

感谢@lashleigh - 所以总结一下，目前来看，您需要在鼠标悬停事件上附加draggable()或其他行为，即在“最后”可能的时刻。一个适用于触摸屏的干净且正确的方法将是积极研究和贡献的好领域。 - sbeam

确切地说，这是我看到大多数人使用的方法。另一种方法是在模板呈现后使用延迟绑定；这适用于触摸设备，但大多数人不喜欢使用超时 hack。 - lashleigh

Meteor.subscribe 回调不起作用的原因是它只在页面加载时集合最初被构建时触发一次。 - dgreensp

3

听起来我们需要一个像这样的后渲染钩子。从长远来看，应该有一个内置的拖放模式。 - dgreensp

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Braden · Accepted Answer

我在我的应用程序中实现的方法是使用@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上看到使用这段代码的应用程序。