5

私が達成しようとしていること。

私がやろうとしていることは実際には本当に単純で、Jadeテンプレートエンジンはそれでかなり助けてくれるはずですが、私はいくつかの問題にぶつかっています。

このjsFiddleのような多くの半透明の要素を使用するサイトを構築しています：http：//jsfiddle.net/Chevex/UfKnM/コンテナ
の背景を半透明にし、テキストを不透明に保つためこれには3つの要素が含まれます。

  • コンテナDIVposition: relative
  • 子DIVでposition: absolute、背景色、高さ/幅が100％に設定され、不透明度が目的のレベルに設定されています。
  • 特別な配置のないコンテンツの別の子DIV。

それは非常に単純で、 CodeTunnel.comでかなり効果的に使用しています。

どうやって単純化したいのか。

node.jsでCodeTunnel.comを書き直していますが、Jadeテンプレートエンジンを使用すると、何度も再利用するこのマークアップを大幅に簡素化できるようです。ジェイドミックスインは有望に見えるので、これが私がしたことです：

  1. ミックスインを定義したので、必要な場所で使用できます。

    mixin container
    .container(id=attributes.id) // attributes is an implicit argument that contains any attributes passed in.
        .translucentFrame
        .contentFrame
            block // block is an implicit argument that contains all content from the block passed into the mixin.

  2. ミックスインを使用して、コンテンツのブロックを渡します。

    +container#myContainer
    h1 Some test content

    生成：

    <div id="myContainer" class="container">
    <div class="translucentFrame"></div>
    <div class="contentFrame">
        <h1>Some test content</h1>
    </div>
</div>

これまでのところ、すべてがうまく機能しています！問題は1つだけです。このミックスインをlayout.jadeテンプレートで使用し、子テンプレートでブロック継承を使用できるようにします。私のlayout.jadeファイルは次のようになります。

doctype 5
mixin container
    .container(id=attributes.id)
        .translucentFrame
        .contentFrame
            block
html
    head
        title Container mixin text
    body
        +container#bodyContent
            block bodyContent

次に、別のjadeファイル（index.jade）でlayout.jadeを拡張します。

extends layout

block bodyContent
    h1 Some test Content

すべてが正常に見えますが、ヒスイのパーサーは失敗します。

blockキーワードの競合と関係があると思います。ミックスインの中には、ミックスblockインに渡されたブロックを含む暗黙の引数がありますが、jadeテンプレートを拡張する場合、ブロックは、親テンプレートの同等のブロックで置き換えられるマークアップのブロックを識別するキーワードです。

block bodyContentミックスインに渡すものを他のマークアップに置き換えると、すべてが正常に機能します。ブロック定義を渡そうとしたときだけ、それは動揺します。

何か案は？

4

1 に答える 1

6

ミックスインは独自の関数を定義しているため、block bodyContentからアクセスできない別のスコープで定義されているのではないかと思いますindex.jade。

代わりに試すことができるのは、ミックスインが「持ち上げられている」ため、ミックスインの使用を継承ビューに移動することです。

layout.jade：

doctype 5

mixin container
    .container(id=attributes.id)
        .translucentFrame
        .contentFrame
            block

html
    head
        title Container mixin text
    body
        block bodyContent

index.jade：

extends layout

block bodyContent
    +container#myContainer
        h1 Some test content
于 2012-12-18T00:52:53.797 に答える