获取给定 DOM 元素的 Meteor 模板实例答案

【问题标题】：Getting the Meteor template instance for a given DOM element获取给定 DOM 元素的 Meteor 模板实例
【发布时间】：2013-08-04 07:04:03
【问题描述】：

我正在向我的 Meteor 应用程序添加使用 jQuery-UI 的拖放功能，用于使用 Meteor 呈现的模板。通过对模板使用.rendered 回调，我可以很好地设置draggable 和droppable 小部件。

诀窍在于发生掉落时。 jQuery-UI 在回调中给出一个事件和一个对象：http://api.jqueryui.com/droppable/#event-drop。但是，我需要找到流星模板实例或基础集合数据 id，以便对可拖动和可放置对象执行某些操作，例如更新集合等。

最好的方法是什么？我见过的最接近任何东西的是一个名为_spark_fooObjectId 的属性，它似乎是由 Meteor 添加的。但这到底意味着什么？

基于阅读https://github.com/meteor/meteor/wiki/Spark，我的第一次尝试是尝试以下操作：

drop: (event, ui) ->
  console.log Spark.getDataContext(ui.draggable)

但是，这将返回 null。还有其他想法吗？

【问题讨论】：

【解决方案1】：

好吧，如果您想要拖动的元素的数据，一种解决方案可能是使用模板数据对您有利。例如，您可以在 Mongo 文档中放置一个名为“label”的字段，并将可拖动的内容包装在像这样的 div 中：

{{#each yourHelper}}
  <div id={{label}}> 
    the rest of your content
  </div>
{{/each}}

然后，例如，如果您想从数据库中的同一文档中获取另一个字段，您的 JS 将如下所示：

 var myquery = $(event.target).parents("div").attr("id");

console.log(myCollection.findOne({"label":myquery}).anotherField);

如果您更喜欢使用孩子，同样的事情也适用，只是您会使用 find() 而不是 parents()。

【讨论】：

【解决方案2】：

糟糕，这只是一个小小的疏忽。正确的解决方案是

Spark.getDataContext(ui.draggable.context)

因为ui.draggable 是一个jQuery 对象。

【讨论】：