玉模板 - 动态属性

时间:2012-11-27 20:37:05

标签: templates pug

我想动态创建一些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我不需要重复代码,但我必须使用纯HTML而不是Jade标记。

我试过这样的事情:

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

但是jade会生成以下代码:

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

有更好的主意吗?

3 个答案:

答案 0 :(得分:32)

当需要弄清楚如何渲染属性时,Jade非常聪明。您可以使用这一行jade标记

渲染已禁用的属性
input(type='text', name='foo', disabled=role!==1)

答案 1 :(得分:5)

您可以以条件方式使用一堆属性:

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

答案 2 :(得分:2)

这种语法对我有用:

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

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