5

Jade テンプレートのライブラリを開発している間、ミックスインのブロックを属性値として使用して、エンド ユーザーの構文を簡素化することが望ましいものになりました。

エンド ユーザーは、ボタンを作成する 3 つの方法から選択できます。タグ、ボタンタグ、および入力タグを介して。入力タグの場合、ブロックを値属性として使用したいので、構文は常に次のとおりです。

+abtn
    | A Button
+btn
    | Button
+ibtn
    | I Button
+abtn(disabled)
    | A Button Disabled
+btn(disabled)
    | Button Disabled
+ibtn(disabled)
    | I Button Disabled

現在、ミックスインのスリム化されたバージョンは次のようになります。

mixin abtn
    - attributes.href = attributes.href || '#'
    - attributes.role = attributes.role || 'button'
    - if (attributes.disabled) {
    -     attributes.class = (attributes.class === undefined) ? 'disabled' : attributes.class + ' disabled';
    -     attributes.disabled = null
    - }
    a.btn(attributes)
        block

mixin btn
    - attributes.type = attributes.type || 'button'
    button.btn(attributes)
        block

mixin ibtn
    - attributes.class = (attributes.class === undefined) ? 'btn' : attributes.class + ' btn';
    - attributes.type = attributes.type || 'button'
    input(attributes=attributes)

問題は、ibtn の値属性を指定するには、エンド ユーザーの構文を次のようにする必要があることです。

+abtn
    | A Button
+btn
    | Button
+ibtn(value='I Button')
+abtn(disabled)
    | A Button Disabled
+btn(disabled)
    | Button Disabled
+ibtn(value='I Button Disabled', disabled)

これは矛盾しています。

組み込みの JavaScript を介してブロックにアクセスすることは可能ですか?その内容の非空白バージョンを属性で使用できますか? もしそうなら、どのように？

編集

明確にするために、次の翡翠コードが必要です。

+ibtn
      | My button value

出力する:

<input value="My button value">
4

1 に答える 1

0

さて、構文の問題です。を実行するmixinと、括弧で引数を指定できるため、このようになります。それはそうです：

mixin myMixin (arg1, arg2)
   p=arg1
   p=arg2
+myMixin('Jade is Cool', 'Yeahh!')

にレンダリングされます...

<p>Jade is Cool</p>
<p>Yeahh!</p>

この場合、 を使いたい場合はattributes、次のようになります。

mixin myMixin (arg1, arg2)
    p( id=attributes.id )=arg1
    p( class=attributes.class, value=attributes.value )=arg2
+myMixin('Jade is Cool', 'Yeahh!').myClass#MyId( value="Kool" )

...としてレンダリングされます

<p id="MyId">Jade is Cool</p>
<p class="myClass" value="Kool">Yeahh!</p>

括弧が 2 つあることに注意してmixinくださいmixin。該当する場合:

+abtn()
    | A Button
+btn()
    | Button
+ibtn()(value='I Button')
+abtn()(disabled)
    | A Button Disabled
+btn()(disabled)
    | Button Disabled
+ibtn()(value='I Button Disabled', disabled)

mixins は JavaScript の関数であることを思い出してください。

于 2015-04-29T00:31:29.423 に答える