Le tooltip de Bootstrap ne fonctionne pas avec des fixations knockout? (w violon)
Violon: 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"));
Pour une raison que l'info-bulle n'apparaît pas pour le".carte-supprimer-bouton". Je pense que c'est parce que cet élément DOM N'est pas disponible tant que la fonction triggerIcon n'est pas activée. Mais dans l'application, je dois lier ces infobulles à beaucoup d'éléments différents et je préférerais le faire une fois, à un seul endroit, au lieu de coller la liaison dans la fonction de déclenchement. comment cela peut-il être réalisé?
3 réponses
votre meilleur pari dans une situation comme celle-ci est de créer une reliure personnalisée que vous pouvez utiliser pour placer des tooltips n'importe où dans le markup.
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"
}
};
vous utiliserez alors cette reliure sur votre page comme:
<input data-bind="value: name, tooltip: { title: help, trigger: 'hover' }" />
vous pouvez définir les options globalement et ensuite les annuler avec tout ce que vous passez dans la liaison.
lorsque vous entrez dans les scénarios de templating et de contrôle-flow, en utilisant une liaison personnalisée aide vraiment, car il sera automatiquement initialisé (et nettoyé) au bon moment, sans avoir à manuellement savoir quand appeler le code.
http://jsfiddle.net/rniemeyer/BF5yW/Addendum à la réponse de @RP Niemeyer...
sur github il y a un petit projet appelé Ko-Bootstrap pour faire du "riche de deux interactions avec Bootstrap et knock-out liaisons".
ci-dessous est une fourchette de votre violon qui comprend 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>
j'ai également rencontré quelques problèmes concernant la liaison tooltip avec knockout et la réponse offerte par RP Niemeyer m'a aidé. Mais ensuite, quand j'ai essayé de lier à une fonction qui renvoie l'objet options du tooltip, cela n'a pas été appelé (il n'a été appelé qu'une seule fois). Donc ça ne marchait pas si j'essayais de changer dynamiquement le titre de l'infobulletin, basé sur les classes CSS cartographiées. Ainsi, la solution que j'ai trouvée est:
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"
}};
je voulais faire cette remarque ici parce que je pense qu'il serait utile dans les cas où le titre de l'encadré d'aide a être modifiés dynamiquement.