twitter-bootstrap Bootstrap 的工具提示不适用于淘汰赛绑定？(w 小提琴)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16875773/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap's tooltip not working with knockout bindings? (w fiddle)
提问by RobVious
Fiddle: http://jsfiddle.net/LkqTU/9399/
小提琴：http: //jsfiddle.net/LkqTU/9399/
Code:
代码：
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"));
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?
出于某种原因，“.card-delete-button”没有显示工具提示。我认为这是因为该 DOM 元素在触发 triggerIcon 函数之前不可用。但是在应用程序中，我必须将这些工具提示绑定到许多不同的元素，并且更愿意在一个地方进行一次，而不是将绑定粘贴到 triggerIcon 函数中。如何做到这一点？
回答by RP Niemeyer
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.
当您进入模板和控制流场景时，使用自定义绑定真的很有帮助，因为它会在正确的时间自动初始化（和清理），而无需手动知道何时调用代码。
Here is a sample: http://jsfiddle.net/rniemeyer/BF5yW/
这是一个示例：http: //jsfiddle.net/rniemeyer/BF5yW/
回答by mg1075
Addendum to @RP Niemeyer's answer...
@RP Niemeyer 的回答的附录...
On github there is a small project called Knockout-Bootstrapfor making "rich two way interactions with Bootstrap and Knockout bindings".
在 github 上有一个名为Knockout-Bootstrap的小项目，用于“与 Bootstrap 和 Knockout 绑定进行丰富的双向交互”。
Below is a fork of your fiddle that includes Knockout-Bootstrap.
下面是包含 Knockout-Bootstrap 的 fiddle 的一个分支。
<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>
回答by Adi Mihasan
I also encountered some problems regarding the tooltip binding with knockout and the answer offered by RP Niemeyer helped me. But then, when I tried to bind to a function which returns the options object of the tooltip, that wasn't called (it has been called only once). So it was not working if I was trying to dynamically change the title of the tooltip, based on the mapped css classes. So, the solution I found is:
我还遇到了一些关于与淘汰赛绑定的工具提示问题，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"
}};
I wanted to make this remark here because I think it would be useful in those cases when the title of the tooltip has to be changed dynamically.
我想在这里发表此评论是因为我认为在必须动态更改工具提示标题的情况下它会很有用。
回答by Fedduh
The answer provided by Adi Mihasan almost worked for me. I had to make the following changes, which may also help others.
Adi Mihasan 提供的答案几乎对我有用。我不得不进行以下更改，这也可能对其他人有所帮助。
$(element).tooltip("destroy");
to
到
$(element).tooltip("dispose");
AND
和
$(element).data("bs.tooltip").options.title = options.title
to
到
$(element).data("bs.tooltip").config.title = options.title
