关于 knockout.js：Bootstrap 的工具提示不适用于敲除绑定？ (小提琴)


Bootstrap's tooltip not working with knockout bindings? (w fiddle)

小提琴：http://jsfiddle.net/LkqTU/9399/

代码：

1
2
3
4
5
6
7
8
9
10
11
12
var ViewModel = function (first, last) {
    var self = this;
    self.showIcon = ko.observable(false);
    self.triggerIcon = function () {
        self.showIcon(true);
    };
};
$('.card-delete-button').tooltip({
    'placement': 'top',
        'title': 'Text'
});
ko.applyBindings(new ViewModel("Planet","Earth"));

由于某种原因，工具提示没有显示在 \\'.card-delete-button\\' 中。我认为这是因为该 DOM 元素在 triggerIcon 函数被命中之前不可用。但是在应用程序中，我必须将这些工具提示绑定到许多不同的元素，并且宁愿在一个地方执行一次，而不是将绑定粘贴到 triggerIcon 函数中。如何做到这一点？

在这种情况下，您最好的选择是创建一个自定义绑定，您可以使用该绑定将工具提示放置在标记中的任何位置。

这是一个工具提示绑定的实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
ko.bindingHandlers.tooltip = {
    init: function(element, valueAccessor) {
        var local = ko.utils.unwrapObservable(valueAccessor()),
            options = {};

        ko.utils.extend(options, ko.bindingHandlers.tooltip.options);
        ko.utils.extend(options, local);

        $(element).tooltip(options);

        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $(element).tooltip("destroy");
        });
    },
    options: {
        placement:"right",
        trigger:"click"
    }
};

然后您将在您的页面上使用此绑定，例如：

1
<input data-bind="value: name, tooltip: { title: help, trigger: 'hover' }" />

你可以全局设置选项，然后用你传入绑定的任何内容覆盖它们。

当您进入模板和控制流场景时，使用自定义绑定确实很有帮助，因为它会在正确的时间自动初始化(和清理)，而无需手动知道何时调用代码。

这是一个示例：http://jsfiddle.net/rniemeyer/BF5yW/

相关讨论

@RP Niemeyer 回答的附录……

在 github 上有一个名为 Knockout-Bootstrap 的小项目，用于"与 Bootstrap 和 Knockout 绑定进行丰富的双向交互"。

下面是你的小提琴的一个分支，其中包括 Knockout-Bootstrap。

http://jsfiddle.net/qZkXP/

1
2
3
4
5
6
    <!-- ko if: showIcon -->
    <a class="card-delete-button"
       data-bind="tooltip: {title: 'Another tooltip', placement: 'right'}">
           <i class="icon-trash">
   
    <!-- /ko -->

我还遇到了一些关于带有敲除的工具提示绑定的问题，RP Niemeyer 提供的答案帮助了我。但是，当我尝试绑定到返回工具提示的选项对象的函数时，它没有被调用(它只被调用过一次)。因此，如果我试图根据映射的 css 类动态更改工具提示的标题，它就不起作用。所以，我找到的解决方案是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
ko.bindingHandlers["tooltip"] = {
'init': function (element, valueAccessor) {
    var local = ko.utils.unwrapObservable(valueAccessor());
    var options = {};

    ko.utils.extend(options, ko.bindingHandlers.tooltip.options);
    ko.utils.extend(options, local);

    $(element).tooltip(options);

    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
        $(element).tooltip("destroy");
    });
},
'update': function (element, valueAccessor) {
    var local = ko.utils.unwrapObservable(valueAccessor());
    var options = {};

    ko.utils.extend(options, ko.bindingHandlers.tooltip.options);
    ko.utils.extend(options, local);

    $(element).data("bs.tooltip").options.title = options.title;
},
options: {
    placement:"top",
    trigger:"click"
}};

我想在此处发表此评论，因为我认为在必须动态更改工具提示标题的情况下它会很有用。

Adi Mihasan 提供的答案几乎对我有用。我必须进行以下更改，这也可能对其他人有所帮助。

1
$(element).tooltip("destroy");

到

1
$(element).tooltip("dispose");

与

1
$(element).data("bs.tooltip").options.title = options.title

到

1
$(element).data("bs.tooltip").config.title = options.title