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

【问题标题】：Making tooltips reactive in Meteor在 Meteor 中使工具提示具有反应性
【发布时间】：2015-07-18 12:04:07
【问题描述】：

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

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

然后我可以通过添加类 tooltipped 和一些 data-tags 来添加工具提示，这里是 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 和非反应性。有谁知道如何使它正常工作？

【问题讨论】：

这些物品怎么样dynamically added？你能展示一些生成fresh items的代码吗？
@SanderGarretsen 通过 mongo insert...
在您的示例中，myTemplate 是单个 fresh 项目的模板实例吗？你有单个项目的模板吗？
@SanderGarretsen 是的。但这不是一个单一的项目，只是他们的“模型”。
好的，不确定您所说的 model 是什么意思...但我发布了一个答案，其中包含一些我认为您的代码可能看起来的示例代码。

标签： twitter-bootstrap meteor

【解决方案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。

【讨论】：

它确实有效。我真的很想知道为什么，因为我不太明白！
更新了我的答案。这有意义吗？
我会用文档准备检查来包装 tooptip 初始化，以确保 DOM 完全准备好并因此正确找到 CSS 选择器： Template.myTemplateItem.onRendered(function() { $(document) .ready(function(){ $('.tooltipped').tooltip(); }); })
@SanderGarretsen "this" 如何在 ES6 语法中工作，例如 ()=> 而不是 function(){}
对我来说，这只适用于悬停。我想在焦点位于字段上时显示工具提示。我如何确定这一点？

【解决方案2】：

您可以简单地在title 属性中使用帮助器。例如，如果您使用流星在meteor create 中创建的默认应用程序，那么您只需编写：

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

您将看到单击计数器按钮时工具提示的变化情况。这是使用Session 变量，这是响应式数据源的完美示例。但是其他响应式数据源应该同样工作，例如，对集合的查询。

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

【讨论】：

【解决方案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'});

}

【讨论】：