良好的DRY方法渲染和页面的AJAX更新

想象一下一个评论网站，用户可以在其中输入评分和可选的简短评论

在每个评论页面上你都有很多评论 – 这些评论显示在页面末尾的一个表格中（顺便说一句 – 没有找到数据网格类型的控件，对于它来说太简单了）

我想让用户输入新评论并更新页面而不刷新页面。 （到目前为止所有简单的东西，这不是问题）

什么是为页面生成的好方法。 一些想法： –

1. 生成评论HTML服务器端，使用javascript客户端添加新评论。 缺点是你在两个地方都有表格HTML生成代码。 好处 – 就搜索引擎而言，页面上的内容更多。

2. 服务器端仅将评论输出为json / xml / whatever，并使用javasript在页面加载时动态呈现HTML。

   缺点 – javascript中的“模板”，设计师很难在页面上自定义+缺少“内容”。

3. 是否有一种方法结合了两种方法 – 即一个模板框架，它将呈现现有数据服务器端，但也发送模板片段客户端，以便可以在那里重复使用以进行添加/编辑。

4. 用（2）获取初始页面加载的数据就可以了

   • a）在初始页面上包含json / xml，并在页面加载时运行客户端渲染

   • b）在页面加载时通过单独的AJAX调用获取它（+更简单， – 额外请求和延迟）

我专注于jQuery / Django，但这个问题适用于其他框架和AJAX库。

这是一个主观的问题，希望它不会超越线！ 思考？

Answer 1

使用框架，方案（3）的方法 – 结合两种方法 – 是使用视图“部分”。 partial是视图的片段，可以自己呈现; 单个视图可以由几个部分组成。

在您的情况下，您将定义部分以呈现评论。 当从头开始显示页面时，服务器端代码循环遍历现有的评论并调用partial来一个接一个地呈现它们。 当新的评论被添加到现有页面时，javascript要求服务器仅呈现该新评论的部分内容并将其作为Ajax响应返回，然后将其附加到页面上的现有评论中。

Answer 2

您不必提前知道模板，您只需在代码中设置钩子，以便在渲染模板时使用JSON填充哪些数据。

该场景将如下工作：

1. 服务器端在初始加载时生成页面
2. AJAX调用查找新页面数据并想要呈现它
3. jQuery克隆页面中的注释项，并使用JSON重新填充数据

我个人喜欢在服务器端保持初始页面加载，以便更容易缓存页面，然后只需要在需要更新页面或切换到相关页面时使用AJAX，而无需重新加载网站。

你的一个例子：

 
 Rob 
Some comment content would go here.
 
  

然后你有一个模板function：

 function template(comment, newCommentMetaData) { // comment is a cloned comment object // newCommentMetaData is the AJAX data comment.attr('data-commenter-id', newCommentMetaData.userid); comment.find('.userName').text(newCommentMetaData.name); comment.find('.userCommentContent').text(newCommentMetaData.content); return comment; } 

最后你必须克隆评论以添加新评论：

 var newComment = $('li.comment:first').clone(); // fill in your AJAX data here var newCommentMetaData = { userid: 'user2345', name: 'Pete', content: 'The new comment content goes here' }; /* you would have to put an each() function here to iterate through all new comments and template them up, but hopefully you get the idea */ template(newComment, newCommentMetaData).appendTo('.commentsArea').fadeIn(); 

Answer 3

在尝试构建可在线编辑的数据库时，我遇到了类似的问题，以保持需要由筹款团队联系的公司状态。

最终我选择2-json和4-b，为了减少数据传输，但由于DRY +时间不足，没有使用它而无需使用javascript。 没有内容可供SE索引，但不关心，因为它是私人的。

但是，如果每次更新转移整个表一次都不是问题，我会选择1.关于那个btw，我不明白为什么你说HTML生成代码会在两个地方。

假设您有一个仅生成表的page_content视图，您可以1）在呈现初始视图时将其包含为“组件”（因为它类似于Nagare Framework中的组件构思，其中页面是嵌套组件的树）页面（所有服务器端），然后2）使用ajax请求它并替换旧表的父的innerHTML，这意味着HTML表生成代码只能在page_content找到，搜索引擎很高兴。

对1的一个很好的优化是不时轮询服务器以进行更新，但是提供上次更新的时间戳，以便如果您已经拥有最新内容，服务器可以发送空响应。 （好吧，如果你不在HTML5中使用WebSockets，这就不需要使用推送通知进行轮询）。

2本身对于一般用途来说是丑陋的，三个声音真的很好，但我不知道在服务器端和客户端都自动处理数据的任何模板框架。

对于编辑，特别是添加，你是对的，你必须在客户端有模板，如果你真的想发送尽可能少的数据（这是我对我页面上的编辑所做的），但是通过将编辑/新项目发送到服务器，然后使用ajax请求更新的页面，您可以更轻松地坚持1。