Jade 模板：嵌套 mixin答案

【问题标题】：Jade template : nest mixinJade 模板：嵌套 mixin
【发布时间】：2013-07-01 02:50:43
【问题描述】：

混合下面

mixin form(title, action)
    legend title
    form.form-horizontal(method='post', action=action)
        label Name:
        input(type='text',name=Name,id=Name)

呈现给

<legend>title</legend>
<form method="post" action="save" class="form-horizontal">
  <label>Name:</label>
  <input type="text"/>
</form>

现在，我将标签和字段提取到另一个 mixin 中

mixin form(title, action)
    legend title
    form.form-horizontal(method='post', action=action)

mixin field(name)
    label #{name}:
    input(type='text',name=name,id=name)

并用作

mixin form("xxxx", "save")
    mixin field('Name')

这会出错

>> Line 1209: Unexpected string
Warning: Jade failed to compile test.jade. Use --force to continue.

是否可以嵌套 mixin 以及如何使其呈现为第一个输出。

谢谢

【问题讨论】：

标签： javascript express pug

【解决方案1】：

似乎应该可以。至少这里的人能够做到。

https://github.com/pugjs/pug/issues/1103

【讨论】：

链接中的这个人非常简洁，但他是对的。实际上，我花了一些时间试图弄清楚他的意思，所以也许这对某人有用。 您必须在包含 mixin 的声明末尾添加块语句。
我不再使用 mixin，但我认为你只需要像 Oscar 所说的那样在最后添加“块”。就像链接显示的一样，但只有一次。 github.com/jadejs/jade/issues/1693

【解决方案2】：

mixin field(name)
    label #{name}:
    input(type='text',name='#{name}',id='#{name}')

mixin forms(title, action, name)
    legend #{title}
    form.form-horizontal(method='post', action='#{action}')
    block
    +field(name)

测试调用

+forms( '*TheTitle*', '*TheAction*' , '*TheName*' )

渲染

<legend>TheTitle</legend>
<form method="post" action="TheAction" class="form-horizontal"></form>
<label>TheName:</label>
<input type="text" name="TheName" id="TheName"/>

您必须单独定义 mixin，然后在 'forms' mixin 的定义中调用 'field' mixin。

【讨论】：