public
Created — forked from joelnet/example.html

Unobtrusive Knockout support library for jQuery

  • Download Gist
example.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
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
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102
/**
* @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
JavaScript
1 2 3 4 5 6 7 8 9
/*
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

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.