玉模板 - 动态调用Mixin [英] Jade Templates - Dynamically Calling a Mixin

问题描述

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

How can I use a string from the json being fed into a Jade template to dynamically load a mixin? Below, the goal is for twoColumn.jade to load the foo and 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"     
            }
        ]            
    }
}

推荐答案

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

This is a feature that is not very obvious in Jade, as it is not explicitly mentioned in the documentation. You can actually use the interpolation syntax (#{...}) for dynamically choosing the mixin name.

来自玉语言指南 ：

插值？对！两种类型的文本都可以使用插值，如果我们将 {name：'tj'，email：'[e-mail]'} 传递给我们可以执行的编译函数以下内容：

interpolation? yup! both types of text can utilize interpolation, if we passed { name: 'tj', email: '[e-mail]' } to the compiled function we can do the following:

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

输出< div id =user> tj& lt ; [e-mail]& 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)

这篇关于玉模板 - 动态调用Mixin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！