I am trying to create a custom binding for twitter boostrap popovers that references a template but I am having trouble with the binding part of the content inside of the po
Slightly modified dodbrian's example. The content is bind to an observable.
https://jsfiddle.net/SergeyZhilyakov/0zxamcj6/14/
var model = {
linkText: "Hover me!",
innerText: ko.observable("Please, wait...")
};
ko.bindingHandlers.popover = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var $element = $(element);
var placement = allBindings.get("placement") || "top";
var trigger = allBindings.get("trigger") || "hover";
var content = allBindings.get("popover");
$element.popover({
placement: placement,
trigger: trigger,
content: content()
});
var popover = $element.data("bs.popover");
content.subscribe(function(newValue) {
popover.options.content = newValue;
popover.setContent();
popover.$tip.addClass(popover.options.placement);
});
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$element.popover("destroy");
});
}
};
ko.applyBindings(model);
setTimeout(function() {
model.innerText("Done!");
}, 3000);
body {
padding: 20px;
}