Jade 模板 - 动态调用 Mixin

Question

如何使用输入到 Jade 模板的 json 字符串来动态加载 mixin？下面，目标是让twoColumn.jade 加载foo 和bar 混合。

twoColumn.jade

mixin twoColumns(obj)
    .container-fluid
        .row(class=obj.class)
            for item in obj.items
                .col-xs-12.col-sm-3
                    //- Syntax for dynamically calling a mixin?
                    +item.template(item)

content.json

{
    "twoColumns": {
        "class": "foobar",
        "items": [
            {
                "template": "foo",
                "title": "Hello"     
            },
            {
                "template": "bar",
                "title": "World"     
            }
        ]            
    }
}

Answer 1

这是一个在 Jade 中不是很明显的功能，因为它没有在文档中明确提及。您实际上可以使用插值语法 (#{...}) 来动态选择 mixin 名称。

来自Jade language guide：

插值？对！这两种类型的文本都可以使用插值，如果我们将{ name: 'tj', email: 'tj@vision-media.ca' } 传递给编译函数，我们可以执行以下操作：

#user #{name} <#{email}>

输出<div id="user">tj <tj@vision-media.ca></div>

示例用法：

mixin foo(item)
  p Foo called

mixin bar(item)
  p Bar called

mixin twoColumns(obj)
  .container-fluid
    .row(class=obj.class)
      for item in obj.items
        .col-xs-12.col-sm-3
          +#{item.template}(item)