A Small JavaScript Object Library to Map View Models to their Source

• Download Sample - 482.1 KB
• Download handyOrm.min.zip - 1.1 KB

Introduction

I have worked on several web applications and most of them happen to be responsive and asynchronous in nature. While working on them, I was always annoyed when I had to write the same old boilerplate code for making asynchronous calls to pass data to the server. This was also the case with storing data on local browser storage. Although this process is already abstracted by using jQuery or some other in-house or third party libraries, still I felt much more abstraction can be introduced. So I have been working for some time to implement a solution to reduce the lines of code to as low as one line to make asynchronous calls, and I came up with a small object library which can be easily customized.

This is still in the initial phase and currently only the feature to pass data to the server exists. You will still have to implement the server code to handle the data. I will be adding the feature to manage local browser storage in the upcoming weeks.

Please note that there are some very rich JavaScript frameworks available out there to facilitate the similar stuff, but I usually avoid using them if my needs are very specific.

Using the Code

You need to create a new object for your model from the ModelDef object and set the properties by calling different functions.

You also need to include jQuery before using this. I have tried to use jQuery mostly as it is already extensively tested on various browsers.

Here are some ways in which you can use the code:

Initialize the model and chain methods in any sequence:

var myModel = null;
myModel = new ModelDef()
              .modelName("MyModel")
              .serviceName("DataService")
              .methodName("ExecuteModelOperation")
              .columns(["id", "name", "phone", "address"]); 

or call them individually according to your requirement:

myModel.serviceName("DataService");
myModel.columns(["id", "name", "phone", "address"]); 

Bind input DOM elements to the columns of our model:

<input ... model-name = "MyModel" 
model-column = "id" disabled = "true"/> <br />
<input ... model-name = "MyModel" model-column = "name"/> <br />
<input ... model-name = "MyModel" model-column = "phone"/> <br /> 

When its time to send or retrieve the data, you just need a single line:

myModel.operation("Insert", ["name", 
"phone", "address"], null).then(ReadRecords, handleError);
...
myModel.operation("Update", ["id", "name", 
"phone", "address"], null).then(ReadRecords, handleError);
...
myModel.operation("Delete", null, [{ col: "id", val: id}]).then(ReadRecords, handleError);  
...
myModel.operation("Read", null, null).then(function (d) {... 

Clear the columns which are bound to input fields:

myModel.clearFields(['name', 'phone', 'address']);

You can view or download the source code and documentation here on GitHub.

The sample application which I made using this library is available here and as a download link at the very start.

Feel free to provide any helpful suggestions/bugs/errors that you find in the code.