Question

我一直在努力解决这个问题已经有一段时间了，似乎无法找到有效的解决方案。希望有人可以提供帮助。

我正在尝试为集合中的每个条目渲染一个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
}

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

Answer 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源），则只会呈现添加/更改/移动的模板。实际上，我认为这可以为您提供{I} observe的功能。

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

1 个答案: