javascript - 在服务器端和客户端之间重用 HTML

Question

我正在开发一个网站。在服务器端，我使用 python(和 Genshi)来操作/生成 HTML。但我发现自己在客户端使用 Javascript 处理相同类型的 HTML 片段。

让我举个例子。假设我有一个可编辑的项目列表:

<form .... >
<ul>
  <li id="i1">Name: <input type="text" name="i1" value="Item 1" /> <a href="#">[del]</a></li>
  <li id="i2">Name: <input type="text" name="i2" value="Item 2" /> <a href="#">[del]</a></li>
</ul>
<a id="addnew" href="#">[new]</a>
</form>

注意:[new] anchor 动态地向表单添加新项目。它不(必须)向服务器发出任何请求。

服务器和客户端都必须知道这个"template"(伪代码):

<li id="${id}">Name: <input type="text" name="${name}" value="${val} " /> <a href="#">[del]</a></li>

服务器必须知道它才能创建初始 HTML 列表，客户端必须知道它才能允许用户使用 anchor 添加和删除项目。

在这种情况下，您认为改善重用的最佳做法是什么？

---

我已经知道我想避免的一些方法:

• 使用 javascript 创建初始列表。我正在尝试使用 javascript 来改进用户交互的某些部分
• 使用一种我可以在客户端和服务器之间以某种方式重用的模板语言不是一种选择，因为我现在仍然坚持使用 Genshi
• 在服务器端生成 Javascript。之前试过这个，调试起来很痛苦，因为有额外的间接级别

Answer 1

大概当您添加一个新项目时，您正在进行 Ajax 调用以将数据发送到服务器？一种方法是返回一个 HTML 片段作为对该调用的响应。这有点 hack，但不如生成 JavaScript。

一种更符合 REST 风格的方法是返回一个 201 Created 响应，其中包含已创建项目的规范 Location header 。然后，您的 JavaScript 将使用 Accept header 发出资源请求， header 指定表示 HTML 片段的自定义媒体类型。这将表示与业务逻辑分开，因此，例如，您可以从需要不同类型 HTML 片段的多个页面中添加项目。