处理许多DOM更改

时间:2013-06-13 08:33:44

标签: javascript dom coffeescript

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

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

等语句搞砸了

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

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

1 个答案:

答案 0 :(得分:0)

如果你真的根据底层模型的变化进行了大量的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,它会自动更改以反映您绑定的数据。