Custom Knockoutjs Bindinghandler For Dynamic Bootstrap Tooltips

I've found a couple other questions and resources here on using Bootstrap tooltips with a custom knockout binding handler. However, I haven't found is a cohesive solution that 1)

Solution 1:

The root of the problem is that the update binding isn't firing, because it doesn't have a dependency on the properties that you are trying to update (i.e. firstName and address);

Normally you can delegate these properties to a new binding and let knockout automatically handle the dependency tracking. However, in this case, you're actually returning a string, so the element's automatic binding can't be used. A string is necessary, because that's how the tooltip works. If it could dynamically read from a DOM element, then the automatic bindings would work, but because it requires a HTML string, there's no way for the bindings to affect that.

Couple of options that I see:

1. Automatically create a dependency on the properties used by the template. This can be done by isolating the template view model (data) as seen in this fiddle: http://jsfiddle.net/tMbs5/13/

//create a dependency for each observable property in the data objectfor(var prop in templateData)
    if( templateData.hasOwnProperty(prop) && ko.isObservable(templateData[prop]))
        templateData[prop]();

2. Instead of using an DOM-based template, use ko.computed to generate the template inside your view model. This will automatically create the dependencies as needed. See this fiddle for an example of that: http://jsfiddle.net/tMbs5/12/

var vm = {
    firstName: ko.observable('Initial Name'),
    address: ko.observable('55 Walnut Street, #3'),
    changeTooltip: function () {
        this.firstName('New Name');
    }
};

vm.tooltipHtml = ko.computed(function () {
    return"<h2>" + vm.firstName() + "</h2>" +
        "<span>" + vm.address() + "</span>";
});

ko.applyBindings(vm);

note: In both fiddles, I have refactored things a tiny bit - mostly for simplification