templates - 翡翠テンプレート-動的属性

Question

いくつかのhtml要素の属性をその場で作成したいと思います。

私の場合、に応じて無効な属性を設定したい（または設定したくない）user.role。

したがって、userフィールドを編集する権限がある場合は、要素に無効な属性を設定したくありません。そうでなければ、私はそれが欲しいです。

私はこれらのアプローチでこれを行うことができることを知っています：

if (user.role === 1)
   input(type='text', name='foo')
else
   input(type='text', name='foo', disabled)

- var disabledAttr = (user.role === 1) ? "disabled" : "";
| <input type="text" name="foo" #{ disabledAttr} />

いくつかのコードを繰り返す必要があるため、アプローチ1は良くありません。アプローチ2では、コードを繰り返す必要はありませんが、Jadeマークアップの代わりにプレーンHTMLを使用する必要があります。

私はこのようなことを試みました：

input(type='text', name='foo', #{ disabledAttr} )

ただし、jadeは次のコードを生成します。

<input type="text" name="foo" disabledattr="" />

より良いアイデアはありますか？

score 32 · Accepted Answer

Jadeは、属性をレンダリングする方法を理解する必要がある場合、非常に賢いです。この1行の翡翠マークアップを使用して無効な属性をレンダリングできます

input(type='text', name='foo', disabled=role!==1)

score 8 · Accepted Answer

条件付きの方法で一連の属性を使用できます。

input(type='text')&attributes(user.role === 1 ? {'disabled': 'true'} : {'class': 'admin', 'ng-model': 'vm.model.name', 'ng-click': 'vm.click()'})

score 2 · Accepted Answer

この構文は私にとってはうまくいきます：

input(placeholder!="<%= translate('Add new item') %>")

ここで、translateは、翻訳されたテキストを返す関数です。

3 に答える 3