javascript - 通过 JSON/AJAX 更新 HTML

Question

自从听说 JSON 以来，我一直在我的 Rails 应用程序中使用 JSON 来处理 AJAX 功能，因为使用 RJS/呈现 HTML “感觉”是错误的，因为它违反了 MVC。我从事的第一个 AJAX 密集型项目最终有 20-30 个 Controller 操作直接绑定(bind)到特定的 UI 行为，我的 View 代码分布在 Controller 操作、部分和 rjs 文件上。使用 JSON 允许您在 View 中保留特定于 View 的代码，并且仅通过 AJAX 与 View 不可知/RESTful Controller 操作对话以获取所需数据。

我在使用纯 JSON 时发现的一个令人头疼的问题是您必须通过 JS“呈现”HTML，对于必须更新 DOM-heavy 元素的 AJAX 来说，这可能是一个真正的痛苦。我最终得到了像

这样的长字符串构建代码

// ...ajax 
success: function(records){
  $(records).each(function(record){
    var html = ('<div id="blah">' + record.attr +
      etc +
    ')
  })
}

其中etc是10-15行根据记录数据动态构建HTML。除了烦人之外，这种方法的一个更严重的缺陷是 HTML 结构的重复(在模板和 JS 中)。*对于这种方法有更好的实践吗？

(我最终伸出援手的动机是我现在的任务是更新 HTML 如此复杂以至于首先需要两个嵌套的 Ruby 代码循环来呈现。在 Javascript 中复制它似乎很疯狂。)

• 我考虑过的一件事是直接从文件系统加载静态部分文件，但这似乎有点过分。

Answer 1

我喜欢模板化的想法。根据我的经验，它确实可以清理那些困惑的字符串操作!

有很多解决方案，例如，查看 John Resig(jQuery 的创建者):

http://ejohn.org/blog/javascript-micro-templating/