在 Meteor 中使工具提示具有反应性

Question

我正在使用 Bootstrap 自己的工具提示，这需要一些初始化。有人告诉我这样做：

Template.myTemplate.rendered = function() {
        $('.tooltipped').tooltip()
}

然后我可以通过在 Font Awesome 图标上添加类tooltipped和一些data-tags来添加工具提示：

<i class="tooltipped fa fa-square" data-toggle="tooltip" data-placement="top" title="Whatever the tooltip should say"></i>

问题是这些图标在动态添加时会在项目上产生，并且某些原因使工具提示无法处理新项目。需要完全重新加载页面才能使它们工作。

谷歌搜索这个问题，我发现了两个假设的解决方案，但没有一个有效。

第一个解决方案是将初始化代码包装在一个Meteor.defer()函数中，我没有经验，实际上甚至没有出现在官方文档中。

Template.myTemplate.rendered = function() {
    Meteor.defer(function() {
        $('.tooltipped').tooltip()
    })
}

然而，这似乎没有任何作用。

第二个解决方案根本不是真正的解决方案，而只是建议放弃 Bootstrap 的工具提示并安装lookback:tooltips但这根本不是一个非常愉快的体验（复杂且不工作）。

所以我只剩下 Bootstrap 和非反应性。有谁知道如何使它正常工作？

Answer 1

所以这不起作用......

<template name="myTemplate">
  {{#each myTemplateItems}}
    <i class="tooltipped fa fa-square" data-toggle="tooltip" data-placement="top" title="{{whateverTheTooltipShoudSay}}"></i>
  {{/each}}
</template>

Template.myTemplate.onRendered(function() {
  $('.tooltipped').tooltip()
})

将onRendered项目添加到 时不会触发回调myTemplateItems。这是因为myTemplate已经呈现。

但这应该有效：

<template name="myTemplate">
  {{#each myTemplateItems}}
    {{>myTemplateItem}}
  {{/each}}
</template>

<template name="myTemplateItem">
  <i class="tooltipped fa fa-square" data-toggle="tooltip" data-placement="top" title="{{whateverTheTooltipShoudSay}}"></i>
</template>

Template.myTemplateItem.onRendered(function() {
  this.$('.tooltipped').tooltip();
})

当一个新项目被添加到 时myTemplateItems，myTemplateItem会创建一个新的模板实例，您可以调用onRendered它。