Javascript 生成元素和关联$.data（）的更有效方法？[jQuery]

我正在寻找一种更有效的方法来生成一些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。

我假设数据来自某个服务器端源。为什么不使用类似的方法，从服务器传递JSON对象或XML等。所有操作都在服务器端完成，然后只向用户显示数据。这些图形非常漂亮，您不需要做当前正在做的所有工作。

我假设数据来自某个服务器端源。为什么不使用类似的方法，从服务器传递JSON对象或XML等。所有操作都在服务器端完成，然后只向用户显示数据。这些图形非常漂亮，您不需要做当前正在做的所有工作。

看看jquery模板插件。。仍处于测试阶段，但非常好！

---

看看jquery模板插件。。仍处于测试阶段，但非常好！

---

使用jQuery 1.4.3+您只需将数据XXX属性放入节点即可。jQuery会自动将其拾取到该节点的数据散列中

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

---

使用jQuery 1.4.3+可以将数据XXX属性放入节点中。jQuery会自动将其拾取到该节点的数据散列中

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

---

我会投票赞成根本不把这些信息放在DOM中。使用JS模型管理该数据，然后根据需要进行查询。这使DOM保持整洁，并正确有效地分离语义标记和支持/驱动它的数据。MVC ftw

我会投票赞成根本不把这些信息放在DOM中。使用JS模型管理该数据，然后根据需要进行查询。这使DOM保持整洁，并正确有效地分离语义标记和支持/驱动它的数据。MVC ftw

这正是我想要的。非常感谢。解决了多次更新DOM和关联数据的问题。这正是我想要的。非常感谢。解决了多次更新DOM和关联数据的问题。