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”没有显示工具提示。我认为这是因为在触发 triggerIcon 函数之前,该 DOM 元素不可用。但是在应用程序中,我必须将这些工具提示绑定(bind)到许多不同的元素,并且宁愿在一个地方执行一次,而不是将绑定(bind)粘贴到 triggerIcon 函数中。如何做到这一点?
最佳答案
在这种情况下,您最好的选择是创建一个自定义绑定(bind),您可以使用该绑定(bind)将工具提示放置在标记中的任何位置。
这是工具提示绑定(bind)的一种实现:
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"
}
};
然后,您将在您的页面上使用此绑定(bind),例如:
<input data-bind="value: name, tooltip: { title: help, trigger: 'hover' }" />
您可以全局设置选项,然后使用传递给绑定(bind)的任何内容覆盖它们。
当您进入模板和控制流场景时,使用自定义绑定(bind)确实很有帮助,因为它会在正确的时间自动初始化(并清理),而无需手动知道何时调用代码。
这是一个示例:http://jsfiddle.net/rniemeyer/BF5yW/
关于twitter-bootstrap - Bootstrap 的工具提示不适用于 knockout 绑定(bind)? ( fiddle ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16875773/