小提琴: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'。我认为这是因为在触发triggerIcon函数之前DOM元素不可用。但是在应用程序中,我必须将这些工具提示绑定到许多不同的元素,并且宁愿在一个地方执行一次,而不是将绑定粘贴到triggerIcon函数中。怎么能实现呢?
答案 0 :(得分:59)
在这种情况下,最好的办法是创建一个自定义绑定,您可以使用该绑定将工具提示放在标记的任何位置。
以下是工具提示绑定的一个实现:
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' }" />
您可以全局设置选项,然后使用传递给绑定的任何内容覆盖它们。
当您进入模板和控制流场景时,使用自定义绑定确实有帮助,因为它会在适当的时间自动初始化(并清理),而无需手动知道何时调用代码。
答案 1 :(得分:7)
@RP Niemeyer答案的补遗......
在github上有一个名为Knockout-Bootstrap的小项目,用于“与Bootstrap和Knockout绑定进行丰富的双向交互”。
下面是你的小提琴的一个分支,包括Knockout-Bootstrap。
<div class='liveExample' data-bind="event: {mouseover: triggerIcon}">
<!-- ko if: showIcon -->
<a class="card-delete-button"
data-bind="tooltip: {title: 'Another tooltip', placement: 'right'}">
<i class="icon-trash"></i>
</a>
<!-- /ko -->
</div>
答案 2 :(得分:4)
我也遇到了一些关于工具提示与淘汰赛绑定的问题,RP Niemeyer提供的答案帮助了我。但是,当我尝试绑定到一个返回工具提示的选项对象的函数时,它没有被调用(它只被调用一次)。因此,如果我试图根据映射的css类动态更改工具提示的标题,那么它就无法工作。所以,我找到的解决方案是:
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"
}};
我想在这里发表这个评论,因为我认为在必须动态更改工具提示的标题时会有用。
答案 3 :(得分:0)
Adi Mihasan提供的答案几乎对我有用。我必须进行以下更改,这可能也对其他人有所帮助。
$(element).tooltip("destroy");
到
$(element).tooltip("dispose");
AND
$(element).data("bs.tooltip").options.title = options.title
到
$(element).data("bs.tooltip").config.title = options.title