Question

I’m building an AJAX app that makes heavy usage of tables displaying data. To keep the design simple it’s nice to be able to tie table rows (DOM) to the data objects (JavaScript) and visa-versa. So, for example, if a row is clicked I know which data object goes with the row, or if a data object is deleted, I know easily which row to delete from the table. Years ago when I tried this, I ended up with lots of memory leaks. I understand IE8+ have resolved most of these. What about modern versions of Chrome, FireFox and Safari?

This is an example of the code, is this “safe” these days?

// Email class, holds info about each email displayed in a table
function Email()
{
   this.To = "";
   this.From = "";
   this.Row = null;
}

// This array would actually come from an AJAX web service call
var Emails = new Array();
Emails[0] = new Email();
Emails[0].To = "whatever";
Emails[0].From = "hello";
Emails[1] = new Email();
Emails[1].To = "whatever";
Emails[1].From = "hello";

// Code like this would be used to build initial table, after this rows would
//  be added deleted as updates arrive via AJAX calls    
var table = document.createElement("table");
for(var x=0;x<Emails.length();x++)
{
   var row = table.insertRow(-1);
   row.Email = Emails[x]; // Is this safe?
   Emails[x].Row = row; // ...and also this?
   var cell = row.insertCell(-1);
   cell.innerHTML = Emails[x].To;
   cell = row.insertCell(-1);
   cell.innerHTML = Emails[x].From;
}

Answer 1

It’s safe, in that sometime after your javascript and DOM elements go out of scope (your page goes away, the javascript objects go out of scope), the memory will eventually be cleaned up.

However, I’d recommend against this. You’re basically creating a table in code, then associating those DOM elements with business objects. That’s mixing UI and logic.

I’d instead suggest using KnockoutJS to let it handle all the DOM-to-JavaScript bindings for you. With KnockoutJS, I’d write your code like this:

HTML:

<table>
   <tbody data-bind="foreach: Emails">
      <tr>
        <td data-bind="html: To"></td>
        <td data-bind="html: From"></td>
      <tr>
   </tbody>
</table>

JavaScript:

var viewModel = {
   Emails: ko.observableArray()
};

makeSome.AjaxCall(function(emailResults) {
    viewModel.Emails(emailResults);
}

ko.applyBindigns(viewModel);

Now your UI stays in the DOM, and your logic stays in JavaScript.

As an added bonus, the DOM will update whenever you add or remove emails to viewModel.Emails array. For example, merely calling viewModel.Emails.remove(someEmail) will automatically update the DOM for you; ditto for .push.