UPDATE Jade v0.24.0 使用属性的!=
语法修复了此问题。 option(value!='<%= id %>')
我正在尝试用 jade 构建一个<option>
,其中选项的值是一个 UnderscoreJS 模板标记:<%= id %>
但我无法让它工作,因为 jade 正在将我的标记文本转换为 <= id >
.
这是我的翡翠标记:
script(id="my-template", type="text/template")
select(id="type")
<% _.each(deviceTypes, function(type){ %>
option(value='<%= type.id %>') <%= type.name %>
<% }) %>
我希望它能产生这个 html:
<script id="my-template" type="text/template">
<select id='type'>
<% _.each(deviceTypes, function(type){ %>
<option value="<%= type.id %>"> <%= type.name %> </option>
<% }) %>
</select>
</script>
但我得到的是:
<script id="my-template" type="text/template">
<select id='type'>
<% _.each(deviceTypes, function(type){ %>
<option value="<%= type.id %>"> <%= type.name %> </option>
<% }) %>
</select>
</script>
请注意输出<option>
行中非常细微的差异...该选项的 value
属性已进行 HTML 编码。
如何防止 Jade 对这个值进行 HTML 编码?我需要它来生成文字值,就像它对选项文本所做的那样。
Derick 已经提到 Jade 在更新中添加了用于取消转义 HTML 编码的新功能,但我想为可能不认识的人添加一些附录。
- var html = "<script></script>"
| !{html} <-- Escaped
| #{html} <-- Encoded
与 https://github.com/visionmedia/jade 相比
此功能已添加到 Jade 中。如果要取消转义属性值,只需使用 !=
运算符:
script#my-template(type='text/template')
a(href!='<%= url =>') Clicky clicky...
在撰写本文时,我不相信有办法。请参阅此问题:https://github.com/visionmedia/jade/issues/198
我最终使用|前缀进入原始HTML来解决它。
所以我遇到了类似的问题,我想在我的一个 Jade 视图中创建一个下划线模板。 在<option>
标记中设置 selected
属性所需的下划线模板的一部分。
最初,我尝试让下划线返回"选定"或"。 不幸的是,Jade 没有办法显示没有值的属性,也没有办法不转义属性名称(下划线位返回时不带引号)。
幸运的是,您可以取消转义属性的值,保留引号。
在此示例中,我根据与字符串值匹配的所有者类型选择下拉列表的值。 我设置了一个帮助程序函数,这样我就不必手动转义引号。
- var checkType = function(type) { return "<%= contact.type == '" + type + "' %>" };
.clearfix
label Title:
.input
select(type="text", name="contact[title]", class="new-title")
option(value="") Choose Title
option(value="manager", selected="#{ checkType('manager') }") Manager
option(value="member", selected="#{ checkType('member') }") Member
option(value="owner", selected="#{ checkType('owner') }") Owner
option(value="president", selected="#{ checkType('president') }") President
option(value="individual", selected="#{ checkType('individual') }") Individual
option(value="main_contact", selected="#{ checkType('main_contact') }") Main Contact
根据一些人的说法,您应该能够在此处使用!{}
来完全避免所有编码(<, >, etc.
),但是这不适用于我的Jade版本。 我正在使用"^0.30"
,当前版本是1.x
.
如果有人可以使用最新版本的 Jade 验证!{}
在这种情况下确实有效,我将更新我的答案。