如何将对象与DOM元素关联

Question

I have a master object in my JS setup, ie:

var myGarage = {
    cars: [
        {
            make: "Ford",
            model: "Escape",
            color: "Green",
            inuse: false
        },
        {
            make: "Dodge",
            model: "Viper"
            color: "Red",
            inuse: true
        },
        {
            make: "Toyota",
            model: "Camry"
            color: "Blue",
            inuse: false
        }
    ]
}

Now I loop over my cars and put them in a table. In the table I also have a button that lets me toggle the car as "in use" and "not in use".

How can I associate the DOM Element of every row with its corresponding car, so that if I toggle the "inuse" flag, I can update the master object?

Answer 1

You can actually attach an object directly to a node:

var n = document.getElementById('green-ford-escape');
n.carObject = myGarage.cars[0];
n.onclick = function() {
  doSomethingWith(this.carObject);
}

For the same of removing ambiguity, in some cases, it's more clear write the above event handler to refer to n instead of this :

n.onclick = function() {
  doSomethingWith(n.carObject);
}

You can also refer directly to the object from the attached event:

var n = document.getElementById('green-ford-escape');
n.onclick = function() {
    doSomethingWith(myGarage.cars[0]);
}

In the latter case, myGarage does not have to be global. You can do this and expect it to work correctly:

(function(){

    var myGarage = { /* ... etc ... */ };

    var n = document.getElementById('green-ford-escape');
    n.onclick = function() {
        doSomethingWith(myGarage.cars[0]);
    }

})();

The node's event function will "hold onto" the local variable correctly, effectively creating a private variable.

You can test this in your Chrome/FF/IE console:

var o = {a: 1};
var n = document.createElement('div');
n.innerHTML = "click me";
n.data = o;
n.onclick = function() { n.data.a++; console.log(n.data, o); }
document.body.appendChild(n);

You should see the console log two identical objects with each click, each with incrementing a values.

Beware that setting n.data to a primitive will not create a reference. It'll copy the value.

Answer 2

I'd suggest considering addEventListener , and a constructor that conforms your objects to the eventListener interface.

That way you can have a nice association between your object, your element, and its handlers.

To do this, make a constructor that's specific to your data.

function Car(props) {
    this.make = props.make;
    this.model = props.model;
   // and so on...

    this.element = document.createElement("div"); // or whatever

    document.body.appendChild(this.element);      // or whatever

    this.element.addEventListener("click", this, false);
}

Then implement the interface:

Car.prototype.handleEvent = function(e) {
    switch (e.type) {
        case "click": this.click(e);
        // add other event types if needed
    }
}

Then implement your .click() handler on the prototype.

Car.prototype.click = function(e) {
    // do something with this.element...
    this.element.style.color = "#F00";

    // ...and the other properties
    this.inuse = !this.inuse
}

So then you can just loop over the Array, and make a new Car object for each item, and it'll create the new element and add the listener(s).

myGarage.cars.forEach(function(obj) {
    new Car(obj)
})

Answer 3

You'll want some sort of ID or distinct row in your information, else you'll have to rely on the array index to do this. Either way you'll want to store the data using data attributes .

So when you loop through:

for (var i = 0, l = array.length; i < l; i++) {
  var div = '<tr data-car="' + JSON.stringify(array[i]) + '" data-index="' + i + '"><td></td></tr>'
}

And on your click event:

$('button').click(function() {
    var carIndex = $(this).closest('tr').attr('data-index');
    var carData = $(this).closest('tr').attr('data-car');
    if (carData) carData = JSON.parse(carData);

    myGarage.cars[carIndex].inUse = true;
})

If you bind the data to the DOM, you may not even need to update the actual JS data. Could go over each row in the table and re-create the data-object you created the table from.

Answer 4

You can use HTML5 data-* attribute to find out which row it is. You must be doing something like this

var table = $('<table>'); // Let's create a new table even if we have an empty table in our DOM. Simple reason: we will achieve single DOM operation (Faster)

for (var i=0; i<myGarbage.cars.length; i++) {
    // Create a new row and append to table
    var tr = $('<tr>').appendTo(table);

    var carObject = myGarbage.cars[i];
    // Traverse the JSON object for each car
    for (var key in carObject) {
        // Create other cells. I am doing the last one
        var td = $('<td>').appendTo(tr);
        var button = $('<button>').attr('data-carId', i).addClass('toggle-inuse').appendTo(td);
    }
}
// If en ampty table awaits me in DOM
$('#tableId').html(table.html());

Now we will add event listener on button :-

$('.toggle-inuse').click(function() {
    var i = $(this).data('carId');
    myGarbage.cars[i].inuse = !myGarbage.cars[i].inuse; //Wow done
}

Try this out !!