如何正确向Nunjucks模板返回关联数组并访问对应属性值

核心结论 #

你完全不需要逐个提取nSunday[1]的属性单独赋值，直接将整个对象返回给模板即可，之前的写法不生效是模板侧的调用语法存在优先级问题。

具体实现步骤 #

1. 修改过滤器返回逻辑 #

直接返回目标对象即可，无需额外拆解属性，修改后的过滤器代码：

const manageEnvironment = function (environment) {
  environment.addFilter('ServiceDate', function (njDay) {
    // 保留你原有的所有日期计算逻辑，生成nSunday等数据
    // ...省略原有业务逻辑...

    // 直接返回对应日期对象即可
    return nSunday[1];
  });
}

// 下方genNunJucks配置无需任何修改，保持原有代码即可
function genNunJucks(cb) {
    return src(['src/views/*.html'])
        .pipe(nunjucksRender({
            path: ['src/views/', 'src/views/parts'],
            ext: '.html',
            data: {},
            inheritExtension: false,
            envOptions: {
                watch: true
            },
            manageEnv: manageEnvironment,
            loaders: null
        }))
        .pipe(htmlbeautify({
            indentSize: 2,
            "eol": "\n",
            "indent_level": 0,
            "preserve_newlines": false
        }))
        .pipe(dest('pub'));
    cb();
}

2. 修正模板侧的调用语法 #

你之前写的{{"Sunday"|ServiceDate.mdate}}存在运算符优先级问题：Nunjucks中属性访问符.的优先级高于管道符|，该写法会被解析为尝试调用ServiceDate.mdate作为过滤器，自然无法正常运行。
两种正确调用方式如下：

• 方式一：用括号包裹过滤器调用，提升优先级后再访问属性

{{ ("Sunday"|ServiceDate).mdate }}
{{ ("Sunday"|ServiceDate).mmonth }}
{{ ("Sunday"|ServiceDate).mhour }}
{{ ("Sunday"|ServiceDate).mmin }}
{{ ("Sunday"|ServiceDate).mday }}
{{ ("Sunday"|ServiceDate).mmeridiem }}

• 方式二（推荐）：先将过滤器返回结果存入临时变量，复用对象避免重复执行过滤器逻辑，性能更好

{% set sundayServiceDate = "Sunday"|ServiceDate %}
日期：{{ sundayServiceDate.mdate }}
月份：{{ sundayServiceDate.mmonth }}
小时：{{ sundayServiceDate.mhour }}
分钟：{{ sundayServiceDate.mmin }}
星期：{{ sundayServiceDate.mday }}
时段：{{ sundayServiceDate.mmeridiem }}

内容的提问来源于stack exchange，提问作者klewis