问题标签 [client-side-templating]

在过去的几周里，我一直在使用jQote——客户端模板插件在运行时生成 html 片段。

几个月来，我一直在使用 id、class、alt 等 dom 属性来存储关键数据。

现在，我开始了解.data()jquery 中存储和检索数据的方法。

在我的整个项目中，我正在使用模板动态生成 html 片段。

现在我需要知道如何在这些模板中动态使用 .data() 并将关键数据存储在任何动态创建的元素中。

模板js代码是这样的，

模板：

解决方案：

执行此行后，该元素在 DOM 中可用。

所以，你可以这样做，

自从我使用 AJAX 并从服务器端获取模板以来已经有一段时间了，因此产生了巨大的流量。

在只有不同数据的单个页面上获取相同的 HTML，有时我会感到内疚，因为我可以做得更好。

然后我想到了一个想法，我研究了客户端模板。

只有我觉得足够好（我认为是因为我还没有练习过）是 jQote2 http://aefxx.com/jquery-plugins/jqote2/。

我只是想要大师的建议，这值得吗？还有其他好的选择吗？

我希望能够定义一次模板并使用它们从服务器端和客户端呈现 html。（DRY 原则等等）

我设想的 API 很简单：render(JSON, template) --> html。

我正在使用 java 框架（实际上是 Play 框架，但我认为这不是特定于框架的）。

我读过很多类似的问题，最新的也是最有帮助的是：Templating language for both client-side and server-side rendering。

我非常同意作者的观点，明显的竞争者喜欢：Mustache 和 Google Closure Templates 不会削减它。（原因见那个帖子）

要求：

• 必须：客户端渲染
• 必须：模板文件的客户端缓存
• NICE：模板文件的客户端“编译一次执行多次”以快速的 javascript 代码
• 必须：服务器端渲染
• NICE：本机 java 实现

我看到一堆帖子建议使用 Node.js 进行服务器端模板。虽然这肯定会起作用（下划线模板、Handlebarsjs、EJS 都可以正常工作）我正在努力了解如何将 Node.js 与 java 通信/组合/集成，毕竟它仍然是需要输出 JSON 的 java 框架

我看过一些帖子提到了 JVM 和 node.js（通过 http 或使用 JNDI）之间的一些概念验证通信。然而，目前似乎没有图书馆，更不用说经过实战测试了。

所以总结一下，你建议什么客户端模板引擎也可以在java中运行（或者有一些箍，可以从jvm调用）？如果那个“圈”恰好是 Node.js，你会建议使用什么通信/库方式？

客户端模板应该像下面这样（使用下划线的模板引擎）：

放在单独的 HTML 文件中，还是单独的 JavaScript 文件中？我知道它可以双向工作。

例如，一个 JavaScript 文件可能只包含一个字符串变量列表，如下所示：

但我也看到了以下内容：

仅从关注点分离的角度来看，模板存储属于哪里？

在 Illustrator 中“另存为 SVG”时，这是典型的结果：

我想知道是否有任何类型的 JavaScript 模板库（如 mustache、handlebars 等）可以让我以与 HTML 类似的方式使用 SVG？
这将允许我保存一堆 SVG 元素模板并动态设置它们的样式属性和内容......

介绍

我目前正在编写一个非常标准的基于 Django 的应用程序（基本上是一种花哨的 CRM/联系人列表之类的东西）。它有点工作，但随着我不断尝试使用越来越多的 AJAXy UI 代码（使用 jQuery）来改进界面，使用它开始变得非常痛苦。我得到了很长的脆弱 jQuery 事件处理程序块，它们解析 DOM，将更改推送回服务器，获取一些 JSON，并尝试基于此更新 DOM。

我觉得，至少，我可能想在组合中添加一些客户端模板。或者，我可以尝试切换到 JS 框架，并将我的 Django 应用程序用作数据库抽象层。或者即使我了解并喜欢 Python，我也可以放弃 Django 应用程序，并尝试使用 JS/Node.js 解决方案或其他方式。

有没有其他人遇到过这种情况？你是怎么解决的？

设计目标

1. DRY：我不想复制我的模型或模板（或者至少，不需要复制）。
2. 我希望访问者登陆页面以获得服务器端渲染的结果。
3. 当访问者单击事物时，我想通过客户端模板和呈现来处理它，并通过 AJAX 调用对 REST 接口保持服务器更新。

那么......我该怎么做呢？我收集了一些框架和模板系统的链接。没有特别的顺序：

灰尘.js：

LinkedIn显然正在使用它来解决类似的问题。它在服务器端使用 Node.js，这并不理想（我从未使用过 Node），但至少它不是基于 JVM。它在 github 上似乎也处于休眠状态 - 我发现人们一直想知道维护者去了哪里的邮件列表。听起来确实不错——LinkedIn 的博客文章很好地推销了这项技术，尤其是编译它的能力。但它似乎只是模板。这足以满足我的要求吗？

小胡子：

此选项同时具有 Python 和 JS 实现，并且似乎很受欢迎……但我找不到任何似乎在 Django 中使用 Mustache 模板的人。这是因为它太容易配得上一篇博文，还是不可能或不明智？它也非常有限。至少我可能需要求助于某种 MVC JS 框架，对吧？

Backbone、Spine、KnockoutJS、EmberJS、JavascriptMVC 等：

有这么多框架，有点令人生畏。乍一看，所有这些似乎都非常好。如果我走这条路，我似乎还需要重写很多我的应用程序，而且我真的很想找到一个实际上已经做过类似事情的人。另外，如果有一个明确的选择让来自 Django 的人作为背景，那就太好了；我不想学习六种不同的框架来评估它们。

德比JS

这看起来很有趣，因为它在一个包中同时处理客户端和服务器端，但有点不成熟。他们警告不要在生产中使用它，如果我理解文档，它还不支持任何形式的持久性，这是......限制。我觉得如果它完成了，那将是我想要的完美……

所以....

所以，呃……现在呢？有没有人使用这些工具尝试将客户端渲染添加到 Django webapp？进展如何？

假设我有这样的 knockout.js 模板：

如果我在页面上的多个位置呈现此模板，我最终会得到具有相同 id 的多个输入（以及具有相同for值的多个标签），这会产生不良后果。特别是，所有依赖于 id 的代码可能无法正常工作（在我的情况下，我使用 jquery.infieldlabel 插件，它会被具有相同 id 的多个输入混淆）。我现在解决此问题的方法是向绑定到模板的模型添加唯一 id 属性：

这行得通，但它不是很优雅，因为我的模型中必须有这个不用于其他任何东西的人工 id 属性。我想知道这里是否有更好的解决方案。

我最近不断听到有关诸如 knockoutjs 或骨干网之类的 javascript 模板引擎的消息。它们看起来都很酷，但我想知道使用这样的系统是否会妨碍对网页的良好索引。

搜索引擎的爬虫是否能够解析 javascript 数据？我认为将页面内容放在 javascript 中是不好的做法，因为其中一些爬虫没有解析它。

有没有办法获得 Django 模板的字典表示？例如，使用此模板：

我最终会得到这样的结果：

我对最终结果非常灵活，我正在寻找一种将相对容易序列化为 JSON 的方法，以便它可以以传统的 Django 方式在服务器端呈现或发送到客户端在那里渲染。

在 Django 中有一个名为循环的模板标签：https ://docs.djangoproject.com/en/2.2/ref/templates/builtins/#cycle

一个例子：

输出：

你如何在 Handlebars.js 中实现这种类型的功能？