web-dev-qa-db-ja.com

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

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

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

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

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

-アプローチ1-条件文を使用する

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

-アプローチ2-プレーンHTML

- 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="" />

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

templatespug
20
Rafael Motta

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

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

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

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

この構文は私のために働きます：

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

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

2
sq2