I was working on a small data entry page and wanted to use jQuery to databind an object to my controls. I was expecting a simple command, like $(“#myControl”).databind(obj.Value), but was surprised to find that one did not exist. The Internet kept telling me to look elsewhere–mostly Knockout–but I was sure that this could be accomplished with jQuery alone.
It turns out that it is easy to do with jQuery, but it’s all manual. I created a function named databind and, for each control, I populate it with the desired property’s value and create an event handler to update the value when the control changes.
function databind() { var ctl; // a checkbox ctl = $("#uxMyCheckbox"); ctl.attr('checked', model.BoolValue); ctl.change(function () { model.BoolValue = this.checked; }); // a textbox ctl = $("#uxMyTextbox"); ctl.val(model.TextValue); ctl.change(function () { model.TextValue = this.value; }); }
It’s not quite as elegant as I was hoping for, but it’ll do for now. I’ll probably check out Knockout for the future, though.
One thought on “Two-Way Databinding with jQuery”