Bootstrap 的工具提示不适用于淘汰赛绑定?(w 小提琴) [英] Bootstrap's tooltip not working with knockout bindings? (w fiddle)

问题描述

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

代码:

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 函数中.如何实现?

For some reason the tooltip isn't showing up for the '.card-delete-button'. I think it's because that DOM element isn't available until the triggerIcon function is hit. But in application, I have to bind these tooltips to a lot of different elements and would prefer to do it once, in one place, instead of sticking the binding into the triggerIcon function. how can this be achieved?

推荐答案

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

Your best bet in a situation like this is to create a custom binding that you can use to place tooltips anywhere in the markup.

这是工具提示绑定的一种实现:

Here is one implementation of a tooltip binding:

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"
    }
};

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

You would then use this binding on your page like:

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

您可以全局设置选项，然后使用传递给绑定的任何内容覆盖它们.

You can set options globally and then override them with whatever you pass into the binding.

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

When you get into templating and control-flow scenarios, using a custom binding really helps, because it will automatically get initialized (and cleaned up) at the right time without needing to manually know when to call code.

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

这篇关于Bootstrap 的工具提示不适用于淘汰赛绑定?(w 小提琴)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！