joelnet · June 3, 2011 18:03 · jwize · May 24, 2012 · joelnet · May 24, 2012
diff --git a/example.html b/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>
diff --git a/jquery.unobtrusive-knockout.js b/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);
diff --git a/jquery.unobtrusive-knockout.min.js b/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);
	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>
	/**
	* @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);
	/*
	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);