要素を生成して$ .data（）を関連付けるより効率的な方法は？ [jQuery]

Question

いくつかのDOM変更を生成し、.data()オブジェクトを更新するより効率的な方法を探しています。

現在、データはオブジェクトの配列で提供されています。セクションに文字列を作成し、テーブル本体に追加して、.dataオブジェクトを要素に追加しています。

ここにスナップショットがあります。

for (i in data.users) { 
    //Build the string 
    var rowData = "<tr class=\""; 
     rowData += (i%2) ? "odd":"even"; 
     rowData +="\">"; 
      rowData +="<td>"; 
      rowData +=data.users[i]["FirstName"]; 
      rowData +="</td>"; 
      rowData +="<td>"; 
      rowData +=data.users[i]["LastName"]; 
      rowData +="</td>"; 
      rowData +="<td>"; 
      rowData +=data.users[i]["UserName"]; 
      rowData +="</td>"; 
      //Could be many more columns 
     rowData +="</tr>"; 

    //Change the DOM, add to the data object. 
    $(rowData).appendTo("#list > table > tbody").data('ID', data.users[i]["ID"]); 
} 

私はDOMをn回操作するのではなく、すべてのdata--で1つの変更を行うか、バッファがあったかのようにデータを解放できるようにした以上、ほとんど怒って。 .data()をオールアットワンスで更新したいと思います。

Answer 1

jQuery 1.4.3+を使用すると、data-XXX属性をノードに追加できます。これは自動的にjQueryによってそのノードのdata()ハッシュに取り込まれます。

var Buffer = []; 
for (i in data.users) { 
    //Build the string 
    Buffer.push("<tr data-ID=\"" + data.users[i]["ID"] + "\" class=\""); 
    Buffer.push((i%2) ? "odd":"even"); 
    Buffer.push("\">"); 
    Buffer.push("<td>"); 
    Buffer.push(data.users[i]["FirstName"]); 
    Buffer.push("</td>"); 
      // and so forth 
    Buffer.push("</tr>");   
} 

$("#list > table > tbody").append(Buffer.join('')); 

Answer 2

私は、データがどこかのサーバー側のソースから来ていると仮定しています。 jqGridのようなものを使用して、サーバーからJSONオブジェクト（XMLなど）を渡して、すべての操作がサーバー側で行われるようにして、ユーザーにデータを表示するのはなぜですか。グラフjqGrid generatesは非常にいいですし、あなたは現在行っているすべての作業を行う必要はありません。

Answer 3

jqueryテンプレートのプラグインを見てください。まだベータ版ですが、とても素敵です！ http://api.jquery.com/category/plugins/templates/

Answer 4

DOMにその情報を入れないと投票します。 JSモデルを使用してそのデータを管理し、必要に応じてクエリを実行します。これによりDOMが整理され、セマンティックマークアップとそれをサポート/駆動するデータを適切かつ効率的に分離します。 MVC ftw！