个人中心
gpt4 book ai didi

javascript - nunjucks 函数参数未定义

转载 作者：数据小太阳 更新时间：2023-10-29 04:19:21 25 4
gpt4 key购买 nike

我已经使用 nunjucks 几个月了，发现它是一个很棒的模板引擎。然而，今天早上我遇到了一个看似简单的问题，但我就是想不通。我希望另一双眼睛可以帮助指出解决方案。

问题:如果我将函数传递给模板，传递给该函数的任何参数在函数体内都是未定义的。

值和对象可以毫无问题地传递给模板，如果我传递一个函数，我可以从函数内部登录到控制台(所以我知道函数本身就在那里)，但参数都是未定义的。

这最初似乎可以通过闭包来解决，但是 1) 我在我能找到的任何示例中都没有看到闭包，并且 2) 当我尝试闭包时我发现它们也接收未定义的参数。

在这一天的过程中，我已经将我的代码缩减为最简单的情况，但仍然无法弄清楚:

模板:

<div>

<p>{{ value }}</p>

<p>{{ object|pretty }}</p>

<p>{{ func(4) }}</p>

<p>{{ args(4)|pretty }}</p>

<p>{{ local(4) }}</p>

</div>

呈现模板的代码(这是在 requirejs 定义的内部，未显示):

    var nunjucks = require('lib/nunjucks-slim.min'), // v1.3.4
        env = new nunjucks.Environment(null), // global templates
        $tgt = $('#test'),
        local;

    env.addGlobal('value', 3);

    env.addGlobal('object', {
        a: 2
    });

    env.addFilter('pretty', function (obj) {
        return JSON.stringify(obj, null, 2);
    });

    env.addGlobal('func', function (val) {
        return 'func: ' + val;
    });

    env.addGlobal('args', function () {
        return arguments;
    });

    local = function (val) {
        return 'local: ' + val;
    };

    $tgt.html(env.render('test.nj', {
        'local': local
    }));

呈现的 HTML 如下所示:

3                  // value

{ "a": 2 }         // object|pretty

func: undefined    // func

{}                 // args

local: undefined   // local

所以，一个值就可以了。该对象也能正常工作，甚至在通过“漂亮”过滤器后看起来还不错。

但是，传递给“func”的值在函数体中变为未定义，并且在函数内部使用参数变量也无济于事。此外，将函数直接传递到模板上下文(本地)也不起作用。

过滤器(基本上只是函数)工作正常，但常规函数不能，无论它们是作为模板上下文的一部分还是作为全局传递。

一些可能有帮助的注意事项:

  • 虽然我正在使用 requirejs(除了导入 nunjucks 本身)我已经尝试从等式中消除它。

  • 此示例使用 nunjucks v1.3.4。通过调试过程，我尝试在 v2.1 中验证此行为，但似乎 v2.x 可能破坏了 requirejs 兼容性，我不想同时解决两个问题。

  • 我正在使用 grunt-nunjucks 预编译我的模板，然后对结果进行丑化。我的 Gruntfile 的相关部分如下:

    module.exports = function (grunt) {
    'use strict';

    grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    nunjucks: {
        common: {
            baseDir: 'site/',
            src: [
                'site/core/**/*.nj'
            ],
            dest: 'application/static/js/common.js'
        },
    },

    uglify: {
        templates: {
            options: {
                preserveComments: false,
                mangle: true,
                compress: {
                    dead_code: true,
                    loops: true,
                    conditionals: true,
                    booleans: true,
                    unused: true,
                    if_return: true,
                    join_vars: true,
                    drop_console: true
                }
            },
            files: {
                'application/static/js/common.min.js': ['application/static/js/common.js'],
            }
        }
    },
    });

    grunt.loadNpmTasks('grunt-nunjucks');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    };

测试模板(如上所示)是编译到 common.js 中的几个模板之一，然后使用上面的设置将其 uglified 到 common.min.js 中。请注意，我已尝试在不进行丑化的情况下编译模板，但得到的结果相同。

这是非常基本的功能，所以如果这是一个错误，我希望在 SE 和问题日志中看到很多引用资料，但我几乎找不到。我想我错过了一些非常明显的东西，但似乎找不到它。

有什么想法吗？

最佳答案

在继续调试之后，我最终通过以下测试设置将丑化和 requirejs 排除在外:

index.html:

<html>
<head>
    <script src="nunjucks-slim.js"></script>
    <script src="common.js"></script>
</head>

<body>

    <script src="test.js"></script>
</body>

</html>

我的模板，预编译成common.js:

<div>

<p>{{ value }}</p>

<p>{{ object|pretty }}</p>

<p>{{ func(4) }}</p>

<p>{{ func(x) }}</p>

<p>{{ args(4)|pretty }}</p>

<p>{{ local(4) }}</p>

<p>{{ local(x) }}</p>

</div>

test.js 是练习模板的代码:

var env = new nunjucks.Environment(null),
    local;

env.addGlobal('value', 3);

env.addGlobal('object', {
    a: 2
});

env.addFilter('pretty', function (obj) {
    return JSON.stringify(obj, null, 2);
});

env.addGlobal('func', function (val) {
    return 'func: ' + val;
});

env.addGlobal('args', function () {
    return arguments;
});

local = function (val) {
    return 'local: ' + val;
};

console.log(env.render('core/root/test.nj', {
    'local': local,
    'x': 4
}));

最后，演示问题的输出(添加了注释):

<div>

<p>3</p>    // value

<p>{
  "a": 2    // object|pretty
}</p>

<p>func: undefined</p>    // func(4)

<p>func: undefined</p>    // func(x)

<p>{}</p>    // args(4)|pretty

<p>local: undefined</p>    // local(4)

<p>local: undefined</p>    // local(x)

</div>

我花了几个小时逐步浏览编译后的模板代码，试图找出问题所在(顺便说一下，这提供了很多信息)，然后脸色难看——因为我已经消除了 requirejs 我可以尝试再次使用 nunjucks v2.1.0。

点击几下后，我得到了有效的测试代码:

<div>

<p>3</p>

<p>{
  a: 2
}</p>

<p>func: 4</p>

<p>func: 4</p>

<p>{
  0: 4
}</p>

<p>local: 4</p>

<p>local: 4</p>

</div>

因此，虽然找出并解决问题(使用 v1.3.4)会很好，但答案似乎是“升级到 nunjucks v2.1.0”。

关于javascript - nunjucks 函数参数未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32917427/

25 4 0
文章推荐： javascript - 从 JSDoc 生成 Swagger YAML？
文章推荐： c# - 为什么我在 ReSharper 中收到错误 'Cannot resolve symbol '？
文章推荐： c# - 在 ASP.NET MVC 站点中正确构建 Lucene.Net 使用
文章推荐： javascript - mouseleave 事件不会在 IE11 中的鼠标滚轮滚动时触发
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com