Apply Bootstrap Javascript function to item in Knockout template

0
votes

I'm using Knockout and Bootstrap together. An anchor tag that is not within a knockout template shows a nice tooltip affect, but those within the template do not. Given html outside a template (this works: a styled tooltip appears below the anchor)

<a data-original-title="Setup" href="'Setup" class="tip-bottom"><i class="icon-th"></i>Setup</a>

Given a knockout template

<tbody data-bind="foreach: {data: providers, afterRender: KoAfterRender}">
  <tr class="">
    <td class="taskOptions">
      <a href="#" class="tip-top" data-original-title="Update"><i class="icon-ok"></i></a>
    </td>
  </tr>
</tbody>

And a function within my ViewModel

function koAfterRender(element, index, data) {
  $('.taskOptions a').popover();
}
obj.KoAfterRender = koAfterRender;

I was hoping to be able to manually apply the .popover function as per this article, but applying the function has no effect (no errors either).

What am I going wrong?

Thanks.

EDIT: I've realised that my code (and the custom binding code helpfully added by Paul Manzotti) both actually work - the problem is that even if I apply .popover() to the anchor in a template it still does not show a tooltip.

EDIT2: I'm an idiot. .popover() is the wrong function. I want .tooltip()

2
twitter-bootstrapknockout.js

2 Answers

1
votes

I've not used Templates, but looking at the page for it, shouldn't you be using it like this:

template: { name: 'person-template', foreach: providers, afterRender: KoAfterRender }

Alternatively, you could try using a custom binding to add the popover code. You should be able to add it to each a element

<a data-bind="KoAfterRender: val">

ko.bindingHandlers.KoAfterRender = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        // This will be called when the binding is first applied to an element
        // Set up any initial state, event handlers, etc. here
        $(element).popover();
    }
};
0
votes

So, to answer my own question: To apply a Bootstrap tooltip to an item in a Knockout template one solution is to use a custom binding (thank you Paul).

So given a template:

<tbody data-bind="foreach: {data: providers}">
    <tr class="">
        <td><a data-bind="KoAfterRender:null" href="#" class="tip-top" data-original-title="Update"><i class="icon-ok"></i></a></td>                                    
    </tr>
</tbody>

and a custom binding:

ko.bindingHandlers.KoAfterRender = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {                                                       
        $(element).tooltip();
    }
};

The tooltip on the databound element should be displayed.