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

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源),则仅渲染添加/更改/移动的模板.实际上,我认为这可以为您提供您想要做的事情observe.