Question

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

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

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

<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。

Answer 2

您可以在title属性中使用帮助器。例如，如果您使用meteor create中创建的默认app meteor，那么您只需编写：

<i class="tooltipped fa fa-square" data-toggle="tooltip" data-placement="top"
   title="{{counter}}"> the text with the tooltip </i>

您将看到单击计数器按钮时工具提示如何更改。这是使用Session变量，这是一个反应数据源的完美示例。但是其他反应性数据源应该起作用，例如，对集合的查询。

警告：我不知道如果用户使用工具提示悬停项目会发生什么，即，在这种情况下，工具提示可能不会更新，直到用户将鼠标移开然后再次悬停。

Answer 3

我使用的另一个解决方案是，当按钮/事件触发模板中的更改时，您可以以编程方式销毁并重新初始化事件处理程序中的工具提示。如果您根据数据中的某些条件使用不同的工具提示/禁用设置，则可以使用相同按钮的不同版本。

您的模板：

{{#unless exceededCapacity}}
    <a href="" id="addItemButton" class="add-item" data-toggle="tooltip" data-placement="top" title="" data-original-title="Click here to add items.">Add Item</a>
{{else}}
    <a href="" id="addItemButton" class="add-item" data-toggle="tooltip" data-placement="top" title="" data-original-title="You cannot add any more items." disabled>Add Item</a>
{{/unless}}

然后你的事件代码：

'click .add-item': function(event) {
    event.preventDefault();  

    //  Destroy the tooltips
    $('.add-item').tooltip('destroy');

    //  Code to do your work... e.g insert time

    //  Reinitialize tooltips - this could also be called in an insert callback upon success, etc.
    $('.add-item').tooltip({trigger: 'hover'});

}

在Meteor中制作工具提示被动

3 个答案: