对后端和前端模板使用相同的树枝语法答案

【问题标题】：of using a same twig syntax for backend and frontend templating对后端和前端模板使用相同的树枝语法
【发布时间】：2012-05-02 02:13:16
【问题描述】：

我最近一直想知道是否有可能使用与 Twig 具有“相同”语法的模板系统进行客户端模板，以及它与 Twig 的集成。找到Swig，好像是“Twig for javascript”。

使用相同的语法有几个好处：

但是，会出现一些挑战：

我需要一种机制来定义模板中的哪些标签/块/部分专用于前端解析。 {% raw %} 标签可以完成这项工作，但是...
以可移植模板为目标意味着非常精细的块和“包含为原始”的可能性。例如：我想在我的主 HTML 文件的 <head> 中收集我希望前端模板引擎可用的所有块，每个块都包含在 <script> 标记中。所以我需要“原始包含”这些块。

是否有人将 Twig 与 Swig 或任何其他 javascript 模板系统结合使用，其语法与 Twig 的语法有些冲突？您将如何管理/组织您的模板，以便您也可以/仅在前端轻松使用模板？

【问题讨论】：

【解决方案1】：

免责声明：这是对未决问题的公开回答，请记住这一点请。我正在分享我的经验，因为没有简单、单一的方式来回答这个问题。

我是一名前端 Web 开发人员，与 symfony 人员密切合作。过去，我们一起使用树枝和小胡子模板。需要 ajax 调用的任何地方都可以复制 Mustache 模板。很明显，这是一个巨大的维护开销。

我将我的答案分为两个部分，分别解决两个不同的问题；构建模板以使其易于前端，并添加 twig 的 javascript 实现。

模板结构

我们在逻辑上组织模板的第一步是将它们分为页面级、功能性和展示性模板。

页面级模板是为应用内容定义通用容器的模板。想想：

功能性模板只是更深一步。它们是用于构建整个页面的预制件。通常它们是来自后端的数据被放入的地方。例如，考虑一个容器中的用户列表。功能模板是容器，它包含展示模板，将数据传递给它。

Presentational 模板只是没有逻辑（没有数据转换）的组件，旨在提供数据。这个组件可以嵌套。（例如 Button 和 title 都包含在 CTA 组件中）。展示组件是我们构建块中最精细的部分。

以这种方式组织代码花费了很多时间，但让我们能够清楚地区分必须能够前端渲染的组件和逻辑繁重的组件。

Twig.js

下一步是集成（如其中一个 cmets 中所建议的那样）twig.js。

我想在我的主 HTML 文件中收集我希望前端模板引擎可以使用的所有块，每个块都包含在一个标签中。所以我需要“原始包含”这些块。

使用 twig.js，您无需担心模板可用于前端。您可以只提供 url，如果模板扩展或包含一些其他模板，则将异步加载。所以用 json 数据提供的 twig 模板，由 javascript 渲染，不需要额外的模板引擎。

我从未运行过任何性能测试。虽然我可以想象 twig.js 比 mustache 慢得多，但在 twig.js 中仅渲染无逻辑组件可以大大提高性能。

如果我没有解决任何问题，请告诉我。我很想进一步讨论这个话题。

【讨论】：