Javascript 如何减少客户端和服务器之间的视图重复？

我正在从事一个AJAXy项目（Dojo和Rails，如果细节重要的话）。用户可以在几个地方对结果进行排序、分组和筛选。还有一些地方，用户填写一个简短的表单，结果项被添加到同一页面的列表中

非AJAXy实现工作得很好——视图层服务器端已经知道如何渲染这些内容，因此它可以以不同的顺序或使用额外的元素再次渲染。然而，这给服务器增加了很多负担

因此，我们转而从服务器发送JSON，并在客户端进行大量（重新）渲染。缺点是，现在我们有了用于呈现每个页面的重复代码：一次是在Rails中，它是为此构建的，另一次是在Dojo中，它不是。后者基本上只是字符串连接

所以问题第一部分：是否有一个好的Javascript MVC框架可以用来使客户端的渲染更易于维护

问题第二部分：有没有办法从同一个模板生成Javascript中的客户端视图和ERB中的服务器端视图？我认为务实的程序员会这么做

---

或者，问题第三部分：我是否完全错过了另一个角度？可能从服务器发送JSON，但也包括HTML代码段作为属性，以便Javascript可以进行过滤、排序等，然后只插入给定的代码段？

好吧，每次在客户端和服务器上生成HTML代码段时，您都可能会得到重复的代码。一般来说，没有什么好办法。但你可以做两件事：

在服务器上生成所有内容。需要动态生成HTML代码段时使用。基本上，您要求服务器生成一个HTML片段，异步接收它，并使用

innerHTML

或任何其他类似机制将其插入到位

在客户机上生成所有内容（也称为厚客户机范例）。在这种情况下，即使对于初始呈现，也要传递数据而不是预呈现的HTML，并使用JavaScript在客户端处理数据以生成HTML。根据具体情况，您可以使用数据岛技术，也可以异步请求数据。变体：将其包含为使用，以便浏览器在加载页面时为您发出请求

这两种方法都非常简单，各有利弊。有时，可以在一个web应用程序中为数据的不同部分组合这两种技术

---

当然，您可以使用一些奇特的解决方案，比如使用一些基于JavaScript的服务器端框架。在这种情况下，您可以在服务器和客户端之间共享代码。

我没有完整的答案给您；在最近的一个项目中，我也在努力解决这个问题。但是，这里有一个想法：

• 对Rails的Ajax调用
• Rails使用新行再次构成整个网格
• Rails序列化HTML，并将其返回到浏览器
• Javascript用新的HTML替换整个网格元素

---

注意：我不是Rails人，所以我不确定这些片段是否合适。

有人尝试过以下类似的东西吗？现在有冗余数据，但所有渲染都是在服务器端完成的，所有交互都是在客户端完成的

服务器端：

render_table_initially:
  if nojs:
    render big_html_table
  else:
    render empty_table_with_callback_to_load_table


load_table:
  render '{ rows: [
    { foo: "a", bar: "b", renderedHTML: "<tr><td>...</td></tr>" },
    { foo: "c", bar: "d", renderedHTML: "<tr><td>...</td></tr>" },
    ...
  ]}'

通过存储

所有可用的\u数据

可以在不影响服务器的情况下进行排序、筛选、分组等操作

我只是很谨慎，因为我从来没有听说有人这样做过。似乎有一个反模式潜伏在那里…

“可能从服务器发送JSON，但也包括HTML片段作为属性，以便Javascript可以进行过滤、排序等，然后只插入给定片段？”

我建议将表示层保留在客户机上，并根据需要下载数据

对于基本模板引擎，您可以扩展Prototype的模板构造：

随着客户机的扩展，您需要一个丰富灵活的MVC，请尝试PureMVC。

---

与常规服务器端编程一样，您应该努力用控件封装实体，在您的情况下，客户端控件具有数据属性，并且还呈现方法+事件

例如，假设您在页面上有一个显示员工树的are，您应该有效地将其行为封装在一个客户端类中，该类可以获取员工列表的JSON对象/默认情况下连接到服务和一个呈现输出、事件等的呈现方法

---

在its中，创建此类控件相对容易-请看。

也许我不完全理解您的问题，但这就是我解决您的需求的方法：

排序、筛选 这一切都可以在JavaScript中完成，而不会影响服务器。这是一个操作表行、移动行进行排序、隐藏行进行筛选的问题，不需要重新渲染。为了能够解析数字或日期，您需要使用具有自定义属性或额外类名的数据类型标记列

如果您的报告是分页的，我认为刷新整个表或页面更容易、更好

团体 我无法在这里帮助您，因为我不明白您将如何启用分组。您是否正在切换列以显示累计值？如何显示不支持累积的数据，如文本或日期

新项目 这一次，我将使用带有JSON响应的AJAX来确认新项目是否正确保存，可能还保存了计算数据

为了将新项添加到结果表中，我将克隆一行并更改值。同样，我们不需要在客户端渲染任何内容。上次我需要这样的东西时，我在结果的末尾添加了一个空的隐藏行，这样无论结果是否为空，您都将始终有一行要克隆。

my中的第5行工作得很好。

当然，它可以工作。但那

dojo.xhrGet({
  url: '/load_table',
  handleAs: 'json',
  load: function(response) {
    dojo.global.all_available_data = response;
    dojo.each(response.rows, function(row) {
      insert_row(row.renderedHTML);
    }
  }
});