custom "bootstrap popover" binding with native template with click handler not working

[Andreas Uppström]

Hi,

I have a custom binding for bootstrap popover which uses a native template and ko.renderTemplate to set the content of the popover when i click a button.

This is how i use the binding:

<button class="btn btn-primary" id="popBtn" data-bind="pop: { name: 'TemplateName', data: aModel }" data-title="A title for the popover">Click Me!</button>

Here's an example template:

<div>
    <div class="row-fluid">
        <button class="btn btn-warning pull-right" data-bind="click: closePopover">Close</button>
    </div>
    <div class="row-fluid">
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>Inv loc</th>
                    <th>Bin</th>
                    <th>Qty</th>
                    <th>Date</th>
                    <th></th>
                </tr>
            </thead>
            <tbody data-bind="foreach: $data.bins">
                <tr>
                    <td data-bind="text: LagStalle"></td>
                    <td data-bind="text: LagPlats"></td>
                    <td data-bind="text: LagSaldo"></td>
                    <td data-bind="date: BestLevDat"></td>
                    <td>
                        <button class="btn btn-small" data-bind="click: $data.chooseBin">Choose</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

And here's the binding (for now, quite non-generic since I'm trying to get the bindings to work properly..):

ko.bindingHandlers.pop = {
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var value = ko.utils.unwrapObservable(valueAccessor());

        var popoverObject = $(value);
        var title = popoverObject.attr('data-title');
        var placement = popoverObject.attr('data-placement');
        var popOverTemplate = $('<div id="knockout-popover">');

        var elm = $('<div>');
        ko.renderTemplate(
            value.name,
            value.data || {},
            {
                afterRender: function (template) {
                    popOverTemplate.append(elm.html());
                    popOverTemplate.append('</div>');

                    $(element).popover({
                        content: popOverTemplate,
                        html: true,
                        trigger: 'manual',
                        title: title || '',
                        placement: placement || 'right'
                    });

                   $(element).click(function () {
                        $(this).popover('toggle');
                    });
                }
            }, elm.get(0), "replaceChildren");
    }
};

My problem is that the click bindings for the buttons in the template don't work. They don't do anything really. All text-bindings work fine though, as does the foreach-binding. What am I missing? I'm going nuts over this! Is there something with the renderTemplate function I'm using in my custom binding? Why don't my click-bindings work? :)

/Andreas