javascript - Nunjucks 模板中的变量解构

标签 javascript ecmascript-6 nunjucks

当前变量在 for 循环中被称为属性:

{% id, item in items %}
  <div>
    {{ id }}
    {{ item.foo }}
    {{ item.bar }}
    {{ item.baz }}
    ...

最好跳过 for 中的 item. 部分:

  ...
  <div>
    {{ id }}
    {{ foo }}
    {{ bar }}
    {{ baz }}

与 ES6 解构类似:

for (const [id, {foo, bar, baz}] of Object.entries(items)) ...

是否可以将它们作为变量而不是 Nunjucks 模板中的 item 属性引用?

最佳答案

恕我直言,它的行为是危险的。 FooBar 可以覆盖传递给模板和 {% set Foo = ... %} 变量。

var nunjucks  = require('nunjucks');
var env = nunjucks.configure();

env.addGlobal('destruct', function(obj) { 
    for (var key in obj)
        this.ctx[key] = obj[key];
})

var res = nunjucks.renderString(`
    {% for id, item in items %}
        {{destruct(item)}}
        {{id}} - {{foo}} - {{bar}}
    {% endfor %}
    `,
    {
        items: {
            A: {id: 10, foo: 'fooA', bar: 'barA'}, 
            B: {id: 20, foo: 'fooB', bar: 'barB'}
        }
    }
);

console.log(res);

关于javascript - Nunjucks 模板中的变量解构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45606679/

相关文章:

javascript - 如何在react-native中显示从另一个js文件到当前文件的模式?

javascript - 当两者具有相同的名称时,javascript 类方法如何知道调用函数或方法?

javascript - 在 Redux 中构建 store

tags - 11ty - 如何在我的 post.njk 文件中显示帖子标签?

javascript - 模板渲染错误

javascript - Phonegap 等待数据库事务完成

Javascript:将对象插入集合

javascript - 在浏览器中使用 Nunjucks,我如何只请求一次模板来迭代使用不同的值?

javascript - 如何在 Javascript 中动态选择 JSON 对象分组的属性

javascript - react | TypeScript - "this"onClick 事件的上下文