twitter-bootstrap – Bootstrap的工具提示不能与敲除绑定一起使

发布时间：2020-12-18 00:09:55 所属栏目：安全来源：网络整理

导读：小提琴： 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({ 'plac

小提琴： 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函数中。这怎么可以实现？

解决方法

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

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

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

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

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

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

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

这里有一个例子：http://jsfiddle.net/rniemeyer/BF5yW/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!