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是基于记录数据动态构建HTML的10-15行。除了烦恼之外，对这种方法的更严重的回归是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

通过JSON / AJAX更新HTML

4 个答案: