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) }
    };

    var sharedOptions = {
        optionsText: "'name'",
        value: "chosenTicket"
    };

    $("#tickets").dataBind({
        options: "tickets",
        optionsCaption: "'Choose...'",
        css : [{someclass : "1 == 1", anotherclass : "1 == 1" }]
    }, sharedOptions);

    $("#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':
                    if ($.isArray(val)) {
                        var items = [];

                        for (var key1 in val) {
                            var val2 = val[key1];
                            for (var innerKey in val2) {
                                items.push(innerKey + " : " + val2[innerKey]);
                            }
                        }
                        rendered.push(key + ':{' + items.join() + '}');
                    } else {
                        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, options2) {
        return this['each'](function () {
            var optionsMerged = (options2 != null) ? merge(options, options2) : options;
            used = [];
            var opts = $.extend({}, $['fn']['dataBind']['defaults'], optionsMerged);
            var attr = render(opts);
            if (attr != null && attr != '') {
                $(this)['attr']('data-bind', attr);
            }
        });
    };

    var used = [];

    function merge(first, second) {

        for (var a1 in first) {
            // if second object is null we are finished.
            used.push(a1);
            if (second[a1] == null) {
                continue;
            } else {

                var ob2 = second[a1];
                if (typeof (first[a1]) != typeof (ob2)) {
                    throw new Error("conflicting properties named: " + a1);
                }

                if ($.isArray(first[a1])) {

                    for (var i = 0; i < ob2.length; i++) {
                        first[a1].push(ob2[i]);
                    }

                } else {
                    // matching property. 
                    return merge(first[a1], second[a1]);
                }
            }
        }
        for (var a2 in second) {
            if (used.indexOf(a2) < 0) {
                first[a2] = second[a2];
            }
        }
        return first;
    }
})(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);

// Not updated