JavascriptとHTMLのデータモデルとプレゼンテーションモデルの設計の質問

Question

私は、ユーザーが提供するオブジェクトを取り込んでHTMLで表現するプロジェクトをJavascriptで作成しています。現在は、配列としてメモリに、別の配列として表示されています。いくつかのコード変更を統合した後で、ディスプレイアレイが内容を削除する際に問題を抱えているように見え、削除すべきものがビューから消えないという問題が生じました。

リストを宣言：

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

がリストにオブジェクトを追加する：

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

変更が実行時にobjectListに対して行われるまでdivList正確objectListを反映しています。再起動すると、リストは再び同期します。私はそれを修正しようとしたとき、物事は非常に複雑でした。私はそのようなアイデア（オブジェクトモデルとグラフィック表現）を設計するためのより良い方法があるのだろうかと思っています。すべてのコメントは役に立ちます。ありがとうございます。

Answer 1

質問曖昧さを除いて、2つではなく1つのリストをメモリに保存することをお勧めします。各リスト要素は、その特定の抽象的な「オブジェクト」（「ユーザーが提供するもの」）に必要なすべての必要なデータを持つオブジェクトです。

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

---

編集：あなたはappendChild()しているHTML要素への参照を格納する必要があり

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

：あなたのaddObject関数は次のようなものに変更されるだろう。このような何かに。あなたはすでにこれをやっている - しかし、あなたは個々の要素を操作する必要がある場合（たとえば、1を削除します）、代わりにmasterList使用します。また、Array.splice()

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

を参照してください。