Javascript und HTML-Datenmodell und Präsentationsmodell Design-Frage

Question

so habe ich an einem Projekt in Javascript gearbeitet, die Objekte in den Benutzer einnimmt und stellt sie in HTML darstellt. Im Moment werden sie im Speicher als ein Array und in der Anzeige als ein separates Array dargestellt. Nach der Integration einiger Code-Änderungen sind Probleme aufgetreten, da das Display-Array Schwierigkeiten hat, seinen Inhalt zu entfernen, wodurch Dinge, die entfernt werden sollten, nicht aus der Ansicht verschwinden.

Deklarieren Listen:

this.divList = gDocument.getElementById(element); 
this.objectList = []; 

ein Objekt in den Listen hinzufügen:

addObject = function (address, type){ 
    var newDiv = gDocument.createElement("div"); 
    this.divList.appendChild(newDiv); 

    var d = this.createObject(newDiv, address, type); 

    if (undefined != d) 
    { 
     this.objectList.push(d); 
    } 
} 

Die divList genau Object reflektiert, bis alle Änderungen an der objektliste zur Laufzeit vorgenommen werden. Beim Neustart sind die Listen wieder synchronisiert. Als ich versuchte, es zu reparieren, waren die Dinge sehr kompliziert. Ich frage mich, ob es eine bessere Möglichkeit gibt, eine solche Idee zu entwerfen (das Objektmodell und die grafische Darstellung). Irgendwelche Kommentare wären hilfreich, danke.

Answer 1

Frage Vagheit beiseite, meine Empfehlung wäre, eine Liste, nicht zwei, im Speicher zu speichern. Jedes Listenelement ist ein Objekt mit allen notwendigen Daten, die Sie für dieses abstrakte Objekt "" benötigen (diejenigen, die "der Benutzer bereitstellt") . Etwas wie folgt aus:

this.divList = gDocument.getElementById(element); 
this.masterList = []; 
var i, 
    len = this.divList.length; 
for (i = 0; i<len; i++) 
{ 
    this.masterList.push({ 
     elt: this.divList[i], 
     obj: /* however you'd create the object in this.objectList */ 
    }); 
} 

---

bearbeiten: Ihre addObject Funktion wäre so etwas wie dies geändert werden:

addObject = function (address, type) 
{ 
    var newDiv = gDocument.createElement("div"), 
     newObj = {elt: newDiv, 
        obj: this.createObject(newDiv, address, type)}; 
    this.masterList.push(newObj); 
    this.divList.appendChild(newDiv); 
} 

Sie einen Verweis auf das HTML-Element gespeichert werden sollte, die Sie appendChild() sind zu. Sie tun dies bereits - aber wenn man die einzelnen Elemente manipulieren müssen (sagen wir, entfernen Sie eine), verwenden Sie die masterList statt:

removeObject = function (i) 
{ 
    var toRemove = this.masterList.splice(i, 1); 
    if (toRemove) 
    { 
     this.divList.removeChild(toRemove.elt); 
    } 
} 

Siehe auch Array.splice().