2

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

我正在尝试为集合中的每个条目呈现一个 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 不可见。这让我发疯，所以如果有人知道我做错了什么，我很想听到一些反馈。

4

1 回答 1

8

您也许可以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。

于 2012-12-03T08:33:19.143 回答