-
-
Save joelnet/1006808 to your computer and use it in GitHub Desktop.
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); |
jwize
commented
May 23, 2012
via email
Ahhhh ok. I get where you were coming from now.
You can even do things like this:
$('#tickets').dataBind({ event: { focus: function(evt) { alert('focus!'); }, change: function(evt) { alert('change!'); } } });
what isn't working? what is "fullName"? Is that a text field? if so, I don't believe "load" is a valid event. Can you use chrome's element inspector to look inside "fullName" to see what the data-bind attribute generated is?
http://www.threetipsaday.com/2008/12/debug-inspect-google-chrome-inspector/
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.
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.