简体繁体 English

对后端和前端模板使用相同的枝条语法

[英]of using a same twig syntax for backend and frontend templating

原文 2012-04-20 13:23:28 9 1 templates/ twig/ jinja2

I've been wondering lately about the possibility to use a templating system with a "same" syntax as Twig for client-side templating, and about its integration with Twig. 最近，我一直在想是否有可能使用与Twig语法相同的模板系统来进行客户端模板，以及与Twig集成。 Found Swig , which seems to be the "Twig for javascript". 找到了Swig ，它似乎是“ javascript的Twig”。

Using a same syntax could have several benefits: 使用相同的语法可能有几个好处：

no need to learn yet another syntax, 无需学习另一种语法，
portable templates: a same block could be used for both frontend and/or backend templating, depending on architecture. 可移植模板：相同的块可用于前端和/或后端模板，具体取决于体系结构。
you name it ... 你叫它...

However, a few challenges would arise: 但是，将会出现一些挑战：

I would need a mechanism to define which tags/blocks/parts in a template are dedicated to frontend parsing. 我需要一种机制来定义模板中的哪些标签/块/部分专用于前端解析。 The {% raw %} tag does the job, but ... {% raw %}标签可以完成这项工作，但是...
aiming at portable templates would speak for very granular blocks and the possibility to "include as raw". 以便携式模板为目标将代表非常精细的块，以及“原始包含”的可能性。 For example: I'd like to gather in the <head> of my main HTML file all the blocks that I want to be available to the frontend templating engine, each one wrapped within a <script> tag. 例如：我想将我希望对前端模板引擎可用的所有块收集在主HTML文件的<head>中，每个块都包装在<script>标记中。 So I would need to "raw-include" these blocks. 因此，我需要“原始包含”这些块。

Has anyone used Twig in conjunction with Swig, or any other javascript templating system with a syntax that somewhat collides with Twig's syntax? 是否有人将Twig与Swig或其他任何语法与Twig的语法有冲突的JavaScript模板系统结合使用？ How would you manage/organize your templates so that you can easily use a template also/just in the frontend? 您将如何管理/组织模板，以便也可以/仅在前端使用模板？

1 个解决方案

disclaimer: This is an open answer to an open question, keep that in mind please. 免责声明：这是对一个开放问题的开放答案，请记住这一点。 I'm sharing my experience as there's no simple, single way of answering this question. 我分享我的经验，因为没有简单，单一的方法可以回答这个问题。

I'm a frontend webdeveloper working closely with symfony guys. 我是与symfony紧密合作的前端Web开发人员。 Back in the days, we used twig and mustache templates together. 过去，我们一起使用了树枝和胡须模板。 Mustache templates duplictad twig wherever there was need for ajax calls. 无论何时需要进行ajax调用，Mustache模板都会复制树枝。 Quite obviously this was a gigantic maintenance overhead. 显然，这是巨大的维护开销。

I divided my answer into two parts addressing two separate issues; 我将答案分为两个部分，分别解决两个单独的问题。 structuring templates to make them easily frontend-able, and adding javascript implementation of twig. 结构化模板以使其易于前端操作，并添加twig的javascript实现。

Templates structure 模板结构

The first step we took towards logically organizing templates, was dividing them into page level , functional and presentational templates. 我们朝逻辑上组织模板迈出的第一步是将它们分为页面级 ， 功能性和表示性模板。

Page level templates are templates defining general containers for app contents. 页面级模板是定义应用程序内容的常规容器的模板。 Think of: 考虑到：

user unauthorized 用户未授权
user authorized 用户授权
email 电子邮件

Functional templates are just one step deeper. 功能模板仅深入一步。 They are prefabricates used to build up the whole page. 它们是预制件，用于构建整个页面。 Usually they are the point where data from backend is being put to. 通常它们是从后端将数据放入其中的地方。 Think of a list of users in a container, for example. 例如，考虑一下容器中的用户列表。 Functional template is the container, which includes presentational templates, passing the data to it. 功能模板是容器，其中包括表示模板，并将数据传递给它。

Presentational templates are just components with no logic (no data transformation), meant to be fed with data. 演示模板只是没有逻辑（没有数据转换）的组件，意味着要与数据一起使用。 This components can be nested. 该组件可以嵌套。 (Fe Button and title are both included by CTA component). （Fe 按钮和标题均包含在CTA组件中）。 Presentational components is the finest grain of our building blocks. 外观组件是我们构建模块中最好的组成部分。

Organising the code this way took much time, but allowed us have a clear distinction on components which have to be able to be frontend-renderable and ones that can be logic-heavy. 以这种方式组织代码花费了很多时间，但使我们对必须是前端可渲染的组件和可能是逻辑繁重的组件有了明显的区分。

Twig.js Twig.js

The next step was integrating (as suggested in one of the comments) twig.js . 下一步是集成twig.js （如其中一条建议所示）。

I'd like to gather in the of my main HTML file all the blocks that I want to be available to the frontend templating engine, each one wrapped within a tag. 我想将我希望对前端模板引擎可用的所有块收集在我的主HTML文件中，每个块都包装在一个标签中。 So I would need to "raw-include" these blocks. 因此，我需要“原始包含”这些块。

With twig.js you don't need to worry about making templates available for the frontend. 使用twig.js，您无需担心使模板可用于前端。 You can just provide the url, and if the template extends or includes some other templates, the'll be loaded asynchronously. 您只需提供url，并且如果模板扩展或包括其他模板，则将异步加载。 So the twig template that is fed with json data, gets rendered by javascript, and there's no need of additional templating engine. 因此，由json数据提供的树枝模板由javascript呈现，因此无需其他模板引擎。

I have never run any performance tests. 我从未进行过任何性能测试。 Although i can imagine that twig.js is considerably slower than mustache, rendering only logic-less components in twig.js can improve performance a great bit. 尽管我可以想象到twig.js的速度要比胡须慢得多，但是在twig.js中仅渲染无逻辑的组件可以极大地提高性能。

If i didn't address anything just please let me know. 如果我什么都没解决，请告诉我。 I'm eager to discuss this subject further. 我渴望进一步讨论这个主题。