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

Question

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

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

然后我可以通过添加类 tooltipped 和一些 data 标签来添加工具提示，这里是 Font Awesome 图标:

<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 和非 react 性。有谁知道如何使其正常工作？

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()
})

将项目添加到 myTemplateItems 时，不会触发 onRendered 回调。这是因为 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。