twitter-bootstrap – Bootstrap的工具提示不能与敲除绑定一起使用? (w小调)

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – Bootstrap的工具提示不能与敲除绑定一起使用? (w小调)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
小提琴: 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/

原文链接:https://www.f2er.com/bootstrap/234345.html

猜你在找的Bootstrap相关文章