Nunjucks帮助函数

时间:2018-03-12 15:53:53

标签: handlebars.js nunjucks

我正在使用Mozilla的Nunjucks模板解析引擎创建HTML。我过去使用了Handlebars,我正在寻找Nunjucks做Handlebars助手的方法(用Javascript编写的普通函数可以调用并传递数据以便在模板中进行转换)。

我目前的用例是我得到的日期为可排序的ISO 8601格式yyyy-mm-dd,如2018-03-12,我需要将其转换为德国标准日期格式dd.mm.yyyy({{1用于显示。

截至目前,我正在使用

在我的模板中执行此操作
12.03.2018

现在,当我有很多需要格式化的日期时,或者即使我想要执行特定于首选项的格式化,我也很乐意将{{ date.split('-').reverse().join('.') }} 传递给执行转换的辅助函数date对我来说:

档案:formatDate

./helper/functions.njk

然后我想在我的页面模板中使用

{% set
  formatDate = function(date) {
    if (typeof date !== 'string') {
      return date
    } else {
      return date.split('-').reverse().join('.')
    }
  }
%}

对于这个简单的用例,过滤器也可以工作:

{{ formatDate(date) }}

但似乎你无法在Nunjucks中定义这样的函数:

{{ date | formatDate }}

我有什么遗漏或者Nunjucks在这方面的功能不如Handlebars?

这里的用例很简单,但这些辅助函数的另一个用例是从工作机会列表中提取唯一的城市列表,然后您可以迭代并创建一个下拉列表,其中包含提供工作的城市的字母列表。

1 个答案:

答案 0 :(得分:0)

Nunjucks解析<html> <head> <title>Numbers Ajax</title> </head> <body> <script> function loadDoc() { var number=document.getElementById("text").value; console.log(number); var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if (this.readyState == 4 || this.status == 200) { document.getElementById("ajax1").innerHTML = this.responseText; console.log(this.responseText) } }; xhttp.open("GET", "http://numbersapi.com/number", true); xhttp.send(); } </script> <div id="ajax1"></div> <h1>AJAX </h1> No.: <input type="text" id="text" name="text" > <button type="button" id="buttonnumber" onclick="loadDoc()">Submit</button> </body> </html> {{ }}括号中的所有代码,因此您无法在模板中使用js-code。大多数函数(如{% %})必须在使用之前由typeof声明。我使用addGlobal来&#34;检查&#34;该日期为date.split and ...

string