玉模板 - 動態調用Mixin

Question

如何使用json中的字符串輸入Jade模板來動態加載mixin？ 下面，目標是讓twoColumn.jade加載foo和bar mixins。

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名稱。

來自玉語言指南 ：

插值？ 對！ 兩種類型的文本都可以使用插值，如果我們將{ name: 'tj', email: 'tj@vision-media.ca' }傳遞給編譯函數，我們可以執行以下操作：

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

輸出<div id="user">tj &lt;tj@vision-media.ca&gt;</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)