服务器端模板，客户端模板 - 自动转换？答案

【问题标题】：Server side templates, client side templates - Automatic conversion?服务器端模板，客户端模板 - 自动转换？
【发布时间】：2011-05-27 23:47:25
【问题描述】：

随着jQuery模板插件的出现，我想知道如何维护服务器端和客户端模板。

因为在我的情况下，我有一些模板，它们可能是重复的——服务器端和客户端。想象一下：

您有一个表格，您可以在其中输入列表点。当您按下提交时，会生成一个 AJAX 请求，但该条目已显示在您的页面上。

现在，这个要点的标记应该是相同的 - 无论它是通过 JS 还是由我的 PHP/.NET/whatsoever 应用程序生成的。

有没有什么好的方法来维护这些模板/使它们保持同步？还是我真的必须手动维护这两个模板？

您在使用 JS 模板的应用程序中有何经验？

【问题讨论】：

你提出的观点很好，我很惊讶它没有被更多地谈论。我向 Phil Haack 询问了这个问题（haacked.com/archive/2010/11/09/… 答案令人困惑 - Dave Ward 还提到需要 jquery tmpl 视图引擎 - encosia.com/2010/12/02/…。
我刚刚看到github.com/awhatley/jquery-tmpl.net 和github.com/xyu/jquery-tmpl-php——两者都尝试将jQuery tmpl 引擎移植到.NET / PHP。
添加了一个有趣的用例，可能有一天对你有用。几个月前我们必须解决的好问题。

标签： jquery templates client-side server-side

【解决方案1】：

如果你喜欢 JS->PHP 优先级 :) 那么你有这两个用于 PHP 后端的 jquery-tmpl 兼容模板渲染器

如果你更喜欢 PHP->JS 优先级 :) 那么你可以试试这个流行的 PHP 模板 Smarty 的 Javascript 实现

http://code.google.com/p/jsmart/

或者你可以尝试一些更中性的东西，比如：

小胡子http://mustache.github.com/

【讨论】：

【解决方案2】：

我的同事是您提到的 .NET 解析器的作者，所以我经常使用它在客户端和服务器之间共享模板。需要明确的是 - 它是相同的模板，相同的文件，无论是在客户端还是服务器上解析。所以没有重复/维护头痛，这非常好。

我们遇到的唯一警告是高级逻辑。模板渲染的数据需要在渲染时或多或少地准备好打印。所以检查数组长度需要是布尔值和结果，字符串需要复数，日期需要格式化等等。我相信 Aaron 正在研究一种将函数作为命名参数传递给 .NET 版本的方法，这样例如在客户端的模板范围内可用的复数函数可以在 C# 中复制并在服务器上以相同的方式使用，从而允许在模板中进行更多的逻辑和处理。尽管如此，即使必须对数据进行预处理，它仍然非常有用。

【讨论】：

【解决方案3】：

Spark View Engine (.NET) 具有 javascript 渲染功能： http://blog.robertgreyling.com/2009/11/teaching-javascript-how-to-render-your.html

另一种只有一组模板的方法是只进行服务器端渲染，使用 ajax 从服务器获取更新的 html。

【讨论】：

【解决方案4】：

我通常将它们存储在视图上；在这里，我将告诉您我为jquery-tmpl 找到的一个非常有趣的用例。

我在一个站点上使用了jquery-tmpl，由于请求数量巨大，需要我称之为decontextualization 的技术。这种技术的实施只是为了在高峰时段保持活力，它完全由以下规则组成：

切勿多次触摸服务器来重新生成页面；除非它绝对有必要。
使用 JavaScript 提供用户谁以及他拥有什么权限的状态。

考虑到这两个规则，您可能会注意到 jquery-tmpl 及其提供的基本逻辑量对于给定案例来说简直是雄伟的。我所做的基本上是将jquery-tmpl 模板包含到需要去语境化的文档中。所有模板均由页面本身提供；所以我可以制作一个d18n javascript 库，它可以执行以下操作：

查询当前用户的快速脚本，将数据作为 JSON 对象返回。
遍历 JSON 并将文档中提供的模板包含在指定的选择器上。让jquery-tmpl 算一下。

每当我们需要对“模板”进行修改时，我们都会按照没有jquery-tmpl 可用的方式进行修改：ON THE VIEW / PARTIAL。

对于“用户可以编辑帖子吗？”，您会看到类似的内容。模板：

<script id="post-edit-button" type="text/x-jquery-tmpl">
  {{if user_id == "<%= post.user.id %>" || role == "staff" || $.inArray(user_id, EDITORS) }}
    <a href="<%= edit_post_url(post) %>">Edit</a>
  {{/if}}
</script>

希望我的经验对你有所帮助。

【讨论】：

【解决方案5】：

我为此使用 XSLT。不是每个人都喜欢它的语法，但它是跨浏览器、快速且有效——你甚至可以通过使用针对嵌入式 iframe 的表单进行客户端模板，而无需太多脚本——具有小型在线文档的优势（比 json 略大，但不多）。 iOS 设备不支持；这些需要使用服务器模板版本 - 但好的是使用相同的模板可以轻松实现。

我不是 javascript 模板库的忠实拥护者：它们很复杂，依赖于版本，通常工具很差，容易随着浏览器的变化而损坏，并且通常会将您绑定到特定的 javascript 库。

【讨论】：