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]锚点会动态地向表单添加新项目。它不（必须）向服务器发出任何请求。

服务器和客户端都必须知道这个“模板”（伪代码）：

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

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

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

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

使用javascript创建初始列表。我正在尝试使用javascript来改善用户交互的某些部分
使用我可以在客户端和服务器之间重复使用的模板语言不是一种选择，因为我现在一直在使用Genshi
在服务器端生成Javascript。之前尝试过，由于额外的间接级别，调试很麻烦

Answer 1

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

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

Answer 2

这有点远，但您可以调查genshi2js。它声称将genshi模板的子集编译成javascript函数（类似于Google的大豆模板）。不幸的是，它似乎是一个废弃的项目。它的主要链接是404，但我能够在上面的链接中找到mercurial存储库，它的最后一个活动是在2008年。

这个问题的最佳解决方案通常是使用相同的模板系统并同时具有JS和服务器端实现。（这也是Google大豆模板背后的理念 - java和js实现。）

Answer 3

如何将HTML存储在带有一些初始占位符的隐藏div中，使用JavaScript将其复制到UI的可见部分，并用AJAX响应替换占位符。响应可以是JSON（键/值对列表）。

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

3 个答案: