CODEWITHSUNDEEP
javascriptjquerymodel-view-controller
Elliot B.
Elliot B.

Reputation: 17651

Best practice for linking UI with model data in a JavaScript + jQuery web app

I'm building a web app that displays a list of customers in a table. There are roughly 15 columns on the table containing different bits of data on these customers. The cells on the table receive user input frequently to update their values.

On page load, the web app sends off an AJAX request with qualifiers to retrieve the appropriate subset of customers out of all active customers. JSON is returned and extended on a global array of objects. Each item in this global array of objects represents a row on the table: var myCustomerList = [{customer_data_object_1},{customer_data_object_2},{customer_data_object_3}].

The HTML for the page is then generated via JavaScript, jQuery, and mustache.js templates. The JavaScript will loop through the global data object (i.e., myCustomerList[i]) and generate rows. I use jQuery's .data() method to link the row itself back to myCustomerList[i]:

$('#tbl_customer_list tr:last').data('cust_data',myCustomerList[i]);

I bind events to UI controls as each cell is appended to a row using jQuery:

$('#tbl_customer_list tr:last td:last a').on('click',function(event) {
    custList.cellEvent.status.openDialog(this,event);
});

Event handling functions then refer back to my global data object using jQuery .data():

custList.cellEvent.status.openDialog = function(oLink,event) {
    var oCustData = $(oLink).closest('tr').data('cust_data');

    //update the global data object
    oCustData.status = oLink.value;
}

I have separate code for reconciling changes made to the global data object with the data on the DB tables.

If the above confused you, this page gives a good overview of the client-side MVC approach I'm trying to take: https://sites.google.com/site/jollytoad/mvcusingjquery

So, two questions:

  1. What is a better way of linking model data (browser-side) to the various UI components on the page? Remember I'm using .data() to create a link between the table row DOM element and the global data object.
  2. What is a better way of organizing/storing the model data (i.e., myCustomerList)?

What I'm doing now works, but it seems a little hacky and I'm polluting the global namespace. I don't know how supportable and maintainable it'll be if we ever have to come back to this page and add widgets independent of the customer list.

I've been considering creating a class for the customer list table as a whole (and a new class for any other new widget added to the page) and storing the model data on a property of that class. But I thought I'd come here first to get some tips on best practices in this area.

Upvotes: 3

Views: 1644

Answers (3)

Timur
Timur

Reputation: 154

Boris Moore is currently working on JsViews & JsRender which is the 'official' jQueryUI way of doing data binding and rendering. It‘s already usable and going beta soon.

Upvotes: 0

Joseph
Joseph

Reputation: 119837

i think you should take a look at this instead:

http://addyosmani.com/largescalejavascript/

it's a modular pattern to handle various parts of the website. this pattern makes parts of the website independent of one another. each module can have it's own MVC and store it's own states. modules do not have the full logic of the application. it's handled by a sandbox API and core API.

as far as i understand, you load the table's data from the server into the table using AJAX. what i suggest you to do is make that table an independent module.

  1. when it receives the AJAX data, store it in the object

  2. after that, render your table based on that object, store the data into the table. what you put in the table is just the visual data. the actual data remains in that object earlier.

  3. whenever you click on an item, the data in it is an exact reference to the original object you put in. whatever you do to it affects the original object.

Upvotes: 1

tkone
tkone

Reputation: 22728

Use a framework designed to handle this sort of thing, like Backbone, Spine, JavaScriptMVC and so forth.

We use Backbone where I work to handle all of this stuff -- it integrates super well with jQuery.

Upvotes: 2

Related Questions