通过 JSON/AJAX 更新 HTML

Question

自从我听说它以来，我一直在使用 JSON 来处理我的 Rails 应用程序中的 AJAX 功能，因为使用 RJS/渲染 HTML “感觉”是错误的，因为它违反了 MVC。我参与的第一个重 AJAX 项目以 20-30 个控制器动作结束，这些动作直接与特定的 UI 行为相关联，我的视图代码分布在控制器动作、部分和 rjs 文件中。使用 JSON 允许您将视图特定代码保留在视图中，并且仅通过 AJAX 与视图无关/RESTful 控制器操作对话以获取所需数据。

我在使用纯 JSON 时发现的一个令人头疼的问题是，您必须通过 JS 来“渲染”HTML，而在 AJAX 的情况下，它必须更新大量 DOM 元素，这可能是一种真正的痛苦。我最终得到了像

这样的长字符串构建代码

// ...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/

Answer 2

我会创建一个 HTML 结构，其中包含您需要通过 AJAX 更新的元素的占位符。它应用多少结构取决于您要更新的内容；如果您提前知道要拥有的元素数量，那将是

<div id="article1">
    <div id="article1Headline"></div>
    <div id="article1Copy"></div>
    <div id="article1AuthorInfo"></div>
</div>
<div id="article2">
    <div id="article2Headline"></div>
    <div id="article2Copy"></div>
    <div id="article2AuthorInfo"></div>
</div>

然后您编写代码，直接引用每个元素的 id，并插入到 .innerHTML 属性中（或者 jquery 做同样事情的任何语法上更甜美的方式）。恕我直言，必须分配每个元素的内容并不是那么糟糕，您不想通过 AJAX 函数散布的部分是 HTML 结构本身；在您的应用中，内容无论如何都是易变的。

但是，看起来您可能有一个未知数量的元素列表，在这种情况下，您可能只需要放入一个占位符：

<div id="articleList"></div>

在这种情况下，我并没有真正看到避免在 javascript 调用中构建 HTML 结构的方法，但是对 javascript 进行合理分解应该会有所帮助：

function addArticle( headline, copy, authorInfo, i ){
    createDiv( "article" + i + "Headline", headline );
    createDiv( "article" + i + "Copy", copy);
    createDiv( "article" + i + "AuthorInfo", authorInfo );
}

（当然不是工作代码，但你明白了，）

Answer 3

你可以在 jQuery 中使用 load 函数； 这会将页面的内容加载到这样的 div 中：

$('#content').load("content/" + this.href.split('#')[1] + ".html", '', checkResponse);

只需制作一个动态视图，您就可以开始了......

Answer 4

恰好找到了我想要的东西：Jaml