One way object binding in JS

This is something I've been putting together this weekend. Due to the fact, that ASP.NET is quite reluctant to get an array of results, I've devised an alternative way of sending data to the server via Web.API. There are already several large frameworks that handle data-binding like Knockout and AngularJS, but these are rather heavy and don't work well with jQuery (at least AngularJS).

Essentially, idea is to convert a form into a ViewModel object on the server side. This usually works with simple POST i.e. there is direct mapping of names and values between the form and the ViewModel. There is however a big limitation: no arrays and/or lists. One cannot simply post an array of values (or there is no clean and easy way of doing it) via MVC (what the heck was Microsoft thinking). The solution is to create a WebAPI which can accept arrays. In order to this however, we need to convert the form into a json. Once we have it, it is easy enough to post.

To make it simple and platform independent, for each element, in your form define a data-bind attribute. It contains a JSON path in your object e.g. data-bind="name" will refer to {name:""} etc. The data-bind can get more complex e.g. data-bind="events.times[0].Start[0]" will map to {events: {[{[],..}]}} and it will be fed data from the field.

Leave Comment

Your email address will not be published.

Please type the characters of this captcha image in the input box

Please type the characters of this captcha image in the input box