Knockout Twitter Bootstrap Popover Binding

Question

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

Answer 1

Here's one more version of the Knockout popover binding which makes use of an html template defined within the document.

Check out this fiddle: https://jsfiddle.net/2cpcgz3o/

(function () {
    var templateEngine = new ko.nativeTemplateEngine();

    ko.bindingHandlers.customPopover = {
        init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
            var placement = allBindings.get("placement") || "top",
                trigger = allBindings.get("trigger") || "click",
                templateName = allBindings.get("customPopover") || null,
                $element = $(element);

            $element.popover({ placement: placement, trigger: trigger, html: true, content: " " });

            $element.on("inserted.bs.popover", function () {
                var container = $element.next().find(".popover-content")[0];
                if (templateName) {
                    ko.renderTemplate(templateName, viewModel, { templateEngine: templateEngine }, container);
                }
                else {
                    container.innerHTML = $element.attr("data-content");
                }
            });

            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $element.popover("destroy");
            });
        }
    };
})();

var model = {
  linkText: "Click me!",
  innerText: "Some fancy text"
};

ko.applyBindings(model);