Jade 模板 - 动态属性

Question

我想为一些 html 元素动态创建属性。

就我而言，我想根据user.role 设置（或不设置）禁用属性。

所以，如果user 有权编辑某些字段，我不想在元素上设置禁用属性。否则，我确实想要它。

我知道我可以通过以下方法做到这一点：

- 方法 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 我不需要重复代码，但我必须使用纯 HTML 而不是 Jade 标记。

我试过这样的：

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

但是jade生成如下代码：

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

有更好的主意吗？

Answer 1

Jade 在需要弄清楚如何渲染属性时非常聪明。您可以使用这一行玉标记来呈现您的禁用属性

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

Answer 2

你可以有条件地使用一堆属性：

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

Answer 3

这个语法对我有用：

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

其中 translate 是一个返回翻译文本的函数。