Unobtrusive Knockout support library for jQuery

example.html

Choose a ticket class: <select id="tickets"></select> 

<p id="ticketOutput"></p> 
        
<script id="ticketTemplate" type="text/x-jquery-tmpl"> 
    {{if chosenTicket}}
        You have chosen <b>${ chosenTicket().name }</b>
        ($${ chosenTicket().price })
        <button data-bind="click: resetTicket">Clear</button>
    {{/if}}
</script> 
    
<script type="text/javascript"> 
    var viewModel = {
        tickets: [
            { name: "Economy", price: 199.95 },
            { name: "Business", price: 449.22 },
            { name: "First Class", price: 1199.99 }
        ],
        chosenTicket: ko.observable(),
        resetTicket: function() { this.chosenTicket(null) }
    };

    $("#tickets").dataBind({
        options: "tickets",
        optionsCaption: "'Choose...'",
        optionsText: "'name'",
        value: "chosenTicket"
    });

    $("#ticketOutput").dataBind({ template: "'ticketTemplate'" });

    ko.applyBindings(viewModel);
</script>

jquery.unobtrusive-knockout.js

/** 
* @preserve Unobtrusive Knockout support library for jQuery
*
* @author Joel Thoms
* @version 1.1
*/

(function($) {

    if (!$ || !$['fn']) throw new Error('jQuery library is required.');

    /**
    * Private method to recursively render key value pairs into a string
    * 
    * @param {Object} options Object to render into a string.
    * @return {string} The string value of the object passed in.
    */
    function render(options) {
        var rendered = [];
        for (var key in options) {
            var val = options[key];
            switch (typeof val) {
                case 'string': rendered.push(key + ':' + val); break;
                case 'object': rendered.push(key + ':{' + render(val) + '}'); break;
                case 'function': rendered.push(key + ':' + val.toString()); break;
            }
        }
        return rendered.join(',');
    }

    /**
    * jQuery extension to handle unobtrusive Knockout data binding.
    * 
    * @param {Object} options Object to render into a string.
    * @return {Object} A jQuery object.
    */
    $['fn']['dataBind'] = $['fn']['dataBind'] || function(options) {
        return this['each'](function() {
            var opts = $.extend({}, $['fn']['dataBind']['defaults'], options);
            var attr = render(opts);
            if (attr != null && attr != '') {
                $(this)['attr']('data-bind', attr);
            }
        });
    };

})(jQuery);

jquery.unobtrusive-knockout.min.js

/*
 Unobtrusive Knockout support library for jQuery

 @author Joel Thoms
 @version 1.1
*/
(function(a){function e(a){var b=[],c;for(c in a){var d=a[c];switch(typeof d){case "string":b.push(c+":"+d);break;case "object":b.push(c+":{"+e(d)+"}");break;case "function":b.push(c+":"+d.toString())}}return b.join(",")}if(!a||!a.fn)throw Error("jQuery library is required.");a.fn.dataBind=a.fn.dataBind||function(f){return this.each(function(){var b=a.extend({},a.fn.dataBind.defaults,f),b=e(b);b!=null&&b!=""&&a(this).attr("data-bind",b)})}})(jQuery);

Your're right, it doesn't work for the reasons you explained. But, the load function works by nature because it only executes once and internally. The binding leaves and empty ..., event: { }" stub in the data-bind attribute that won't do anything. So, in really it doesn't work as you mentioned and I have also decided that it doesn't make sense to bind an event such load. ``` $(this).dataBind({ ... event: { click: "alert($('#" + id + "').get(0).id)" } }); ``` This seems to be the only way to pass an object. The expression has to be a string.

On Thu, May 24, 2012 at 2:57 PM, joelnet < ***@***.*** > wrote: I don't believe the $(this) part will work. use the element inspector and you'll see why. The function get's converted into a string and will lose ## the "this" context. Reply to this email directly or view it on GitHub: https://gist.github.com/1006808 ##

* Jaime Weise * Technical Director MOBILE 778 319 1739 OFFICE 604 568 2812 TOLL FREE 1 877 568 2812 EMAIL [email protected] URL www.ellev8.ca ``` * ``` WARNING: This Electronic communication is protected pursuant to relevant international treaties and domestic laws, and is legally privileged. The information that is contained within this communication is intended ONLY for the individual and/or entity who is the intended recipient, and YOU ARE HEREBY ON NOTICE THAT any dissemination, distribution, copying, or other use of this communication by anyone other than the intended recipient in an unauthorized manner is strictly prohibited by law. IF YOU HAVE RECEIVED THIS MESSAGE IN ERROR, PLEASE CONTACT THE SENDER IMMEDIATELY! *

I think there's an inconsistency: instead of $.extend() need to use $['extend']() /sarcasm.

Is there a reason for this notation?

@unirgy, there is no valid reason for that notation. I would do this differently today. Not sure what the reason was way back then.