wie ein Objekt mit einem DOM-Elemente verknüpfen

Question

ich ein Master-Objekt in meinem JS-Setup habe, d.h .:

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 
     } 
    ] 
} 

Jetzt habe ich eine Schleife über meine Autos und in einem Tisch. In der Tabelle habe ich auch einen Knopf, mit dem ich das Auto als "in Gebrauch" und "nicht in Gebrauch" schalten kann.

Wie kann ich das DOM-Element jeder Zeile mit dem entsprechenden Auto verknüpfen, so dass ich das Master-Objekt aktualisieren kann, wenn ich das Flag "inuse" umschalte?

Answer 1

Ich würde vorschlagen, addEventListener und einen Konstruktor, der Ihre Objekte an die eventListener Schnittstelle entspricht.

Auf diese Weise können Sie eine schöne Verbindung zwischen Ihrem Objekt, Ihrem Element und seinen Handlern haben.

Erstellen Sie dazu einen Konstruktor, der für Ihre Daten spezifisch ist.

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); 
} 

implementieren Sie dann die Schnittstelle:

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

Dann implementieren Ihre .click() Handler auf dem Prototyp.

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

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

Also dann können Sie nur eine Schleife über den Array, und ein neues Car Objekt für jedes Element, und es wird das neue Element erstellen und den Hörer (n) hinzufügen.

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

Answer 2

Sie möchten eine Art ID oder eine bestimmte Zeile in Ihren Informationen haben, sonst müssen Sie sich auf den Array-Index verlassen. In jedem Fall möchten Sie die Daten mit data attributes speichern.

Also, wenn Sie eine Schleife durch:

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>' 
} 

Und auf dem Click-Ereignisse:

$('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; 
}) 

Wenn Sie die Daten an den DOM binden, können Sie nicht einmal die tatsächlichen JS Daten aktualisieren . Sie können jede Zeile in der Tabelle durchlaufen und das Datenobjekt, aus dem Sie die Tabelle erstellt haben, neu erstellen.

Answer 3

Sie können tatsächlich ein Objekt direkt mit einem Knoten befestigen:

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

Für die gleiche Mehrdeutigkeit zu entfernen, in einigen Fällen, es ist mehr klar die obigen Ereignishandler schreiben, um n statt this zu verweisen:

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

Sie können auch direkt auf das Objekt aus dem beigefügten Ereignisse beziehen:

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

In letzterem Fall muss myGaragenicht global sein. Sie können dies tun und erwarten, dass es korrekt funktioniert:

(function(){ 

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

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

})(); 

Der Event-Funktion des Knotens wird „festhalten“ die lokale Variable korrekt, effektiv eine private Variable zu schaffen.

Sie können dies testen in Ihrem Chrome/FF/IE-Konsole:

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); 

Sie sollten das Konsolenprotokoll zwei identische Objekte mit jedem Klick sehen, die jeweils mit a Werte erhöht wird.

Beachten Sie dass die Einstellung n.data zu einem Primitiv wird keine Referenz erstellen. Es kopiert den Wert.

Answer 4

Sie können das HTML5-Attribut data- * verwenden, um herauszufinden, welche Zeile es ist. Sie müssen so etwas wie dieses

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()); 

Jetzt fügen wir Ereignis-Listener auf die Schaltfläche tun: -

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

dies ausprobieren !!