如何在浏览器客户端使用nunjucks宏?

2024-01-04

当我从 node.js 预编译并公开 JS 模板文件时,我可以使用 nunjucks 的客户端模板。我这样称呼客户端模板:

nunjucks.render('partials/some-template.html', { abc: 123 })

并拿回一根绳子。

我怎样才能像我尝试过的那样调用宏,但我做错了。宏首先在 Node.js 中在页面上声明,然后连续调用,例如在 Node.js 中:

{% include 'macros/checkbox.html' %}
...
{{ checkbox('you cool?', 'cool', false) }}
{{ checkbox('you collected?', 'collected', false) }}

但不知道如何获取宏然后在客户端一次又一次地调用它。到目前为止,我确实努力在控制台中进行检查,但没有运气。


当我想在客户端渲染宏时,我使用了nunjucks.renderString https://mozilla.github.io/nunjucks/api.html#renderstring1方法来导入包含宏的文件,然后调用它——这一切都是一次性完成的。我的用例是将宏渲染为 HTML,然后使用 Javascript 将其添加到页面上。示例用例是:

var renderString = "{% import 'packageForms.html' as forms %} \n";
renderString = renderString + '{{ form.packageForm("task") }}';
var renderedHTML = nunjucks.renderString(renderString);
$('#page').append(renderedHTML)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在浏览器客户端使用nunjucks宏? 的相关文章

  • 在 MongoDB 中查找具有字符串 ID 数组的文档

    我有一个 id 字符串数组 我想将其与 find 函数一起使用 db companies find id in arr arr看起来像这样 563a2c60b511b7ff2c61e938 563a2c60b511b7ff2c61e8b7
  • 在浏览器中语音聊天? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我们正在寻求建立一个小组 voice 使用服务器上的node js 在浏览器中聊天 这可能吗 如果您希望您的解决方案是基于服务器端和客
  • 在 BIRT 中输入参数后更新数据集查询

    在 BIRT 报告设计中传递参数后 如何更改或更新数据集的查询 详细说明 我有一个如下所示的查询 WHERE 该参数标记可以保存不同的值 在用户输入参数后 它看起来像这样 例如 WHERE column name 1 or WHERE co
  • 未捕获的引用错误:myFunction 未定义[重复]

    这个问题在这里已经有答案了 这到底是怎么回事 http jsfiddle net sVT54 http jsfiddle net sVT54
  • 将音频与视频流合并 Node.js

    我正在创建 YouTube 视频下载器并且正在使用ytdl core库 它无法下载带有音频的高质量视频 因为 youtube 将其放在另一个文件中 但我需要将其全部下载到一个文件中 我已经这样做了 app get download asyn
  • 何时不使用承诺[关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 在阅读了数十篇关于 es6 Promise 有多伟大以及为什么我们应该实现它们的文章之后 我有这样的感觉 ALL我的 不平凡的 JavaScri
  • 响应式网格布局框架[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 如何在 d3 js 中突出显示从根到选定节点的路径?

    我使用 d3 js 创建了一棵树 现在我创建了一个下拉菜单 其中包含树中所有节点的列表 现在 从下拉菜单中选择一个节点时 我想突出显示从根到该特定节点的路径 这个怎么做 首先创建一个 flatten 函数 它将分层数据变成一个 n 数组 f
  • 创建 Cookie 时需要帮助

    我有一个名为yes和另一个名叫no
  • 保存/导出Chrome的JavaScript控制台输入历史记录

    无论如何 我可以保存或导出 JavaScript 控制台的历史记录吗 input 控制台历史记录 在 Google Chrome 中 我不想保存输出或错误 因此将鼠标悬停在控制台框上 右键单击并选择Save as 不是解决方案 我不想每次都
  • 由于缺少会话而在 Next.js 中使用 Next-Auth 进行重定向时,如何显示 Toast 通知? [复制]

    这个问题在这里已经有答案了 例如 假设我有一个名为internal tsx 的页面 其中包含 export const getServerSideProps GetServerSideProps async ctx gt const ses
  • HTML colorpicker 发生变化时如何获取新值?

    我正在开发一个需要更改 HTML 颜色的网络应用程序canvas基于的价值观colorpicker 我有一个colorpicker在我需要获取的 HTML 中value从每次更新开始
  • Aptana Studio 3 上的预览选项卡在哪里?

    我在 Windows PC 上使用 Aptana Studio 2 并有一个选项卡用于在 IE 上预览页面 另一个选项卡用于在 Firefox 上预览 但我切换到了 Aptana 3 我不知道是没有预览还是我没有找到它 是的 我在 stac
  • Keycloak javascript 适配器 `keycloak.init` 加载 404 iframe

    我正在尝试使用 javascript 适配器将 Keycloak 集成到我的客户端应用程序keycloak js 但是 我似乎无法让它发挥作用 这是我的代码 const keycloak new Keycloak realm my real
  • 如何在 e2e AngularJS 测试中进行文件上传?

    在我的一种观点中 我有一个文件上传控件 它支持通过拖放或单击按钮后打开的标准文件对话框上传文件 How to do this in my e2e tests1 1 Just one of the two options will be en
  • 需要js、d3 和 nvd3 集成

    我面临整合的问题要求 questions tagged requirejs with d3 questions tagged d3 and nvd3 questions tagged nvd3 我找到了一个使用 require 的简单解决方
  • Restangular - _.contains() 不是一个函数

    如果您最近通过 Bower 更新了 Restangular 它将安装最新的 Lodash 新的 4 0 然而 这是一个问题 因为 Restangular Angular 现在会抛出错误 contains 不是函数 你怎么解决 解决方案非常简
  • 我可以使用 jQuery 动态创建文件(及其内容)吗? [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 这是我的 HTML 代码 ul li
  • Bootstrap 3 / 显示模式不适用于 javascript 方式

    我用Modal http getbootstrap com javascript modalsBootstrap 3 0 的功能 我有这个代码 a href myNestedContent Open the modal containing
  • 如何调试 Gulp 任务?

    如何调试我的中定义的 gulp 任务gulpfile js使用诸如 Google Chrome 调试器之类的调试器逐行单步执行任务的代码 对于 Node js 6 3 版本 您可以使用 inspect flag https nodejs o

随机推荐

  • Fetch Type LAZY 仍然会导致急切加载 Hibernate Spring 数据

    我使用 Spring 数据创建了一个简单的 Spring boot 项目 我有一个与标签具有一对多关系的 TagGroup 实体 Entity Table name TAG GROUP public class TagGroup OneTo
  • moz变换比例减小div大小问题

    我在 mozilla moz transform 缩放属性方面遇到问题 我正在寻找 Zoom 属性的替代品 它在除 Firefox 之外的所有平台上都能正常工作 当我想缩小 div 时 它的 内容 确实缩小了 但容器的大小保持不变 在其他内
  • 在 JavaScript 正则表达式匹配中移动索引

    我有这个正则表达式来从文本中提取双词 A Za z s A Za z g 以及这个示例文本 Mary had a little lamb 我的输出是这样的 0 Mary had 1 a little 而我的预期输出是这样的 0 Mary h
  • 设置远程共享继承其父目录权限的 C# 代码

    我有两台计算机 分别称为客户端和服务器 位于 Windows 域中 服务器有一个可以从客户端计算机访问的共享目录 我想在客户端上运行一个 C 应用程序 该应用程序设置此共享的权限以继承服务器上共享的父目录的权限 我该怎么做呢 我已经尝试过以
  • 在 Google Cloud Storage 存储桶上设置缓存控制

    我有一个存储桶 其中包含经常更新的公共图像 并且希望禁用默认缓存持续时间 3600 例如 Cache Control private max age 0 no transform 使用 PHP 上传文件时可以设置缓存控制吗 有没有办法为存储
  • git 如何检测文件已被修改?

    git 如何如此快地检测到文件修改 它是否对存储库中的每个文件进行哈希处理并比较 SHA1 这会花费很多时间 不是吗 或者说比较atime ctime or mtime Git 努力仅从 lstat 值中确信工作树与索引匹配 因为回退到文件
  • 如何从 TableList POI 中移除/删除表格

    我正在使用模板 docx 文件来填充每个表上的数据 但在某些情况下我不想要同一个表 是否有使用可以删除 删除的 XWPFTable 你可以试试 int position document getPosOfTable table docume
  • 如何让 .NET 取消未使用的 RAM?

    以下是我的程序在极其密集地使用内存后的统计数据 在峰值时消耗 6 GB 但随后将所有内容保存到磁盘并在范围内留下很少的内容 观察到几乎所有内容都超出了范围并已被垃圾收集 堆大小很小 然而 NET 保留了 181 MB坚定的 我不介意保留字节
  • 如何将 warnings() 输出转换为字符串

    当我在控制台输入 warnings 时 我回来了 Warning message In fread my directory C function strtod returned ERANGE for one or more fields
  • 在 google colab 中找不到 kaggle.json 文件

    我正在尝试将 kaggle imagenet 对象本地化挑战数据下载到 google colab 中 以便我可以用它来训练我的模型 Kaggle 使用 API 来轻松快速地访问其数据集 https github com Kaggle kag
  • 当我添加对 Cargo.toml 文件的依赖项时,阻止等待包缓存上的文件锁定

    我向 Rust 项目添加了依赖项 然后运行了 Cargo Run 这给了我这个错误 阻止等待包缓存上的文件锁定 我尝试了在网上找到的解决方案 即删除 cargo package cache 文件 但这对我不起作用 当我输入类似 cargo
  • 计划任务调用的批处理文件在计划时抛出错误,双击时运行正常

    我有一个映射网络驱动器的批处理文件 大约一周前 密码过期了 因此调用批处理文件的程序开始抛出错误 我已经更新了批处理文件中的密码 当我双击批处理文件时 驱动器映射正常 但是 当计划任务开始时 我收到以下错误 Logon failure un
  • 我们可以使用 match 来检查类的类型吗

    我是 scala 新手 我正在学习match现在关键字 我想知道我们是否可以使用关键字match检查类的类型 我的代码是 object Main def main args Array String val x AA checkType x
  • Java EE/JPA 向数据库添加新表/实体的方法

    我有一个mysql数据库 我想添加向数据库添加新表的功能 我可能可以轻松找到 JPQL 的示例 但是如何自动为这个新表生成实体 以便我可以在 JPA 代码的其余部分中引用它 以便从表中更新和删除我通常引用该实体不是实际的表本身 我现在拥有的
  • 如何在 Windows 上使用 PyInstaller 创建 Linux 和 MacOS 可执行文件?

    我使用 Pyinstaller 从 python 代码制作了一个独立的 Windows 便携式应用程序 并且它工作正常 我知道要为某个操作系统创建可执行文件 必须在该特定操作系统上完成 有没有一种方法可以直接从 Windows 创建适用于其
  • 阻止 TFS 添加临时文件

    我正在开发一个在 TFS 中绑定的项目 该项目为我提供了一个文件夹 Log 当我执行我的项目并进行一些测试时 它会生成文本文件并存储在 Log 文件夹中 之后 当我尝试签入文件时 这些文件将作为 TFS 中的新文件签入 我希望 TFS 排除
  • python 将 10 位日期时间戳转换为 13 位 GMT 时间戳 [重复]

    这个问题在这里已经有答案了 我从像这样的服务器收到时间戳 1512543958 当我在标头中发回请求时 我看到像这样的 13 位 GMT 时间戳 1512544485819 通过使用下面的代码将时间更改为本地时间 我得到2017 12 06
  • 无状态 Web 应用程序,都市传奇?

    我试图理解token based authentication这些天 它声称是stateless authentication方法 我遇到了这个概念stateless web application 以下是我读到的一些主题 使用 Sprin
  • Ionic4 未知浏览器查询

    我已经练习了很多 Ionic 所以这些问题对我来说并不新鲜 但我无法解决这个问题 我目前正在尝试将我的 Ionic3 项目迁移到 Ionic4 为此 我创建了一个新的 Ionic4 选项卡项目 每次我尝试 Ionic 服务命令时 我都会得到
  • 如何在浏览器客户端使用nunjucks宏?

    当我从 node js 预编译并公开 JS 模板文件时 我可以使用 nunjucks 的客户端模板 我这样称呼客户端模板 nunjucks render partials some template html abc 123 并拿回一根绳子