web-dev-qa-db-ja.com

Jadeテンプレートを介して変数を渡す

Jadeでは、あるテンプレートから別のテンプレートに変数を渡すことができますか？。私はこのようなことをしたいです：

tmp1.jade

div.anyClass
  include components/checkbox('someLabel')

tmp2.jade

div.otherClass
  div.label
    {someLabel}

ありがとう！

pug
23
John Miller

インクルードされたテンプレートは、それらをインクルードしたテンプレートの変数スコープを継承するため、その後の作業は自動的に行われます。

したがって、以下が機能します：

tmp1.jade

- var label = 'value'
div.anyClass
    include tmp2

tmp2.jade

div.otherClass
    div.label
        #{label}

変数を渡すためにミックスインを使用することもできます。変数は関数のようです（最初に定義してから呼び出します）

したがって、次のことができます。

tmp1.jade

mixin labeldiv(myLabel)
    div.otherClass
        div.label
            #{myLabel}

div.anyClass
    +labelDiv("the label")

複数のテンプレートでミックスインを共通にする場合は、ミックスインをインクルード内に配置することもできます。あなたはこれを行うことができます：

myMixins.jade

mixin labeldiv(myLabel)
    div.otherClass
        div.label
            #{myLabel}

tmp1.jade

include myMixins
div.anyClass
    +labelDiv("the label")

Jade Syntax Docs には、すべてがどのように機能するかの素晴らしい（ライブ）例がいくつかあります。

55
Jed Watson