使用 jQuery 来定位在 Meteor 中呈现的元素答案

【问题标题】：Using jQuery to target elements rendered in Meteor使用 jQuery 来定位在 Meteor 中呈现的元素
【发布时间】：2012-12-03 16:33:19
【问题描述】：

我已经为此苦苦挣扎了一段时间，似乎找不到有效的解决方案。希望这里有人可以提供帮助。

我正在尝试为集合中的每个条目呈现一个 div，然后使用 jQuery 来定位每个 div，获取存储在与该 div 对应的条目中的信息，并根据数据的值更改其 CSS。

这是我的模板：

<template name="vis">
    <div id="vis">
        {{#each Actions}}
            <div class="visEntry" id="entry{{ID}}"></div>
        {{/each}}
    </div>
</template>

我尝试使用 cursor.observe() 来给我一个回调，只要条目被添加到集合中，但我不能使用 jQuery 来选择新呈现的元素。我可以通过控制台打印所选条目中的任何值，使用 jQuery 选择和修改非模板 div（在 HTML 文件中硬编码）但是当我选择我想要的元素时，它不起作用。

Template.vis.Actions = function(){
    var actions = Actions.find() 
    actions.observe({
        added: function(action){
            var entryHeight = action.Duration
            var entryOffset = ($("#vis").height() - entryHeight) / 2

            var target = "#entry" + action.ID;
            $(target).css({'background-color':'red'})      // Doesn't work
            $("#testDiv").css({'background-color':'red'})  // Works fine
        }
    })
    return actions
}

我检查了我的live页面的源代码，jQuery选择器中使用的ID是正确的。我有四个条目：entry1、entry2、entry3 和 entry4，但它们似乎对 jQuery 不可见。这让我发疯，所以如果有人知道我做错了什么，我很想听听一些反馈。

【问题讨论】：

值得注意的是，我没有禁用自动发布，因为它仍处于开发初期，我还不需要担心安全性。这可能是我的问题的原因吗？
尝试在 var target = "#entry" + action.ID; 上使用meteor.defer，我认为这是因为您的#entry 在渲染期间还没有在dom 上。如果你 console.log $(target)，它会返回什么？

标签： jquery meteor

【解决方案1】：

您也许可以为此目的使用Meteor.template.rendered 函数，因为问题似乎是您的DOM 尚未呈现。您的模板可能如下所示：

<template name="vis">
    <div id="vis">
        {{#each Actions}}
            {{>visEntry}}
        {{/each}}
    </div>
</template>

<template name='visEntry'>
    <div class="visEntry"></div>
</template>

然后你可以像这样使用 Template.rendered 回调：

Template.visEntry.rendered = function(){
  var mydata = this.data, 
      el = this.find('div.visEntry');

  // jquery code here;
}

您将可以访问与this 中的每个模板相关联的数据，并且您还可以使用内置的find 来获取该模板中的适当dom 元素。然后，您可以使用相关数据设置您想要的任何 DOM 元素的 CSS。此外，如果模板最初提供了Meteor.Collection（而不是fetched 源），则只会呈现添加/更改/移动的模板。实际上，我认为这为您提供了您对observe 所做的尝试。

【讨论】：