Tre piccioni con un Custom Binding

Sulla falsariga dei Custom Bindings di Knockout per jQueryUI trovati qui e qui ne ho implementato uno per il PopOver di Bootstrap.

L'obiettivo principale era, ovviamente, rispettare il pattern MVVM anche nell'uso del framework di Twitter ed evitare che l'iniezione asincrona nel DOM di pezzi di UI rompesse l'applicazione del plugin al $(document).ready().
Mi si è aperta, però, un'altra possibilità...

I Popovers di BS non supportano nativamente l'opzione target, come invece fanno i Modals.
E questo è un peccato: definire direttamente nel markup il contenuto html è, di nuovo, perfettamente compliant al MVVM e offre una flessibilità impagabile.
Ho quindi delegato al binding la valorizzazione del content nei due casi:

• che sia valorizzata l'opzione content
• che sia valorizzata l'opzione target (non nativa) con il selettore di un oggetto definito nel DOM

Qui il binding:

/**
KnockOut Custom Binding for Bootstrap Popovers (http://twitter.github.com/bootstrap/javascript.html#popovers)
Author: lightwalker
**/

(function ($) {

    if (ko && ko.bindingHandlers) {

        ko.bindingHandlers.bsPopover = {
            init: function (element, valueAccessor) {
                var val = ko.utils.unwrapObservable(valueAccessor());
                var options = { title: val.title,
                    animation: val.animation,
                    placement: val.placement,
                    trigger: val.trigger,
                    delay: val.delay,
                    //can grab html content from a target option
                    content: ($(val.target).html() != null) ? $(val.target).html() : val.content
                };
                $(element).popover(options);
            }
        };

    };

})(jQuery);

E qui il frammento di view:

<!-- popover activator -->
<a href="#" class="btn btn-danger" rel="popover" data-bind="bsPopover:{title: vmObservable(), target:'#popover-content'}">Hover Me!</a>
<!-- popover html content -->
<div id="popover-content" class="hide"><b>Custom HTML Content</b></div>

E allora... Buon binding a tutti!

Edit: continua con: Custom bindings rulez (again)