Bootstrap的工具提示不适用于敲除绑定? (摆弄) [英] 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的工具提示不适用于敲除绑定? (摆弄)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！