处理许多DOM更改

Question

我有一个项目，我通过ajax请求加载部分内容。我每次都得到相同的信息结构（json），我试图为每个呈现这些结构的DOM-Layout制作一个coffeescript类。

我正在处理这些结构的第一个DOM表示，而我的代码被controls.append @Legende.content.messageSpan或@Legende.content.itself.append $(labelNew).html "Name: "

等语句搞砸了

问题：我必须实现3个以下DOM表示，这会炸毁我的代码。

我的问题如下：处理许多DOM树更改和/或防止扩大文件数量和增加文件大小的主要做法是什么？

Answer 1

如果你真的根据底层模型的变化进行了大量的DOM更改，最好使用一个库，它允许你隐式地将dom绑定到模型而无需显式更改。其中2个最受欢迎的库是

• knockoutjs（执行此操作，没有别的）
• angularjs（执行此操作以及您可能需要或不需要的许多其他事项）

KnockoutJS通常更简单，更平易近人。

Angular有点复杂和自以为是，但随着项目变得越来越好。

这些库通过向html添加注释（基于Knockout的示例）

来工作

<tr>
    <td><input data-bind="value: name" /></td>
    <td><select data-bind="options: $root.availableMeals, value: meal"></select></td>
    <td data-bind="text: formattedPrice"></td>
    <td><a href="#" data-bind="click: $root.removeSeat">Remove</a></td>
</tr>   

您可以随意设置dom，它会自动更改以反映您绑定的数据。