如何让 Jade 停止 HTML 编码元素属性，并生成文字字符串值？

Posted 2023-02-18

【中文标题】如何让 Jade 停止 HTML 编码元素属性，并生成文字字符串值？

【英文标题】：How to make Jade stop HTML encoding element attributes, and produce a literal string value?

【发布时间】：2012-04-24 01:41:31

【问题描述】：

更新 Jade v0.24.0 使用!= 属性语法修复了这个问题。 option(value!='<%= id %>')

---

我正在尝试使用jade 构建<option>，其中选项的值是UnderscoreJS 模板标记：<%= id %> 但我无法让它工作，因为jade 正在将我的标记文本转换为@987654325 @。

这是我的 Jade 标记：

script(id="my-template", type="text/template")
  select(id="type")
    <% _.each(deviceTypes, function(type) %>
    option(value='&lt;%= type.id %>') <%= type.name %>
    &lt;% ) %>

我希望它能生成这个 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="&lt;%= type.id %&gt;"> <%= type.name %> </option>
    <% ) %>
  </select>
</script>

请注意输出的<option> 行中的非常细微的差别...该选项的value 属性已被HTML 编码。

如何防止 Jade 对这个值进行 HTML 编码？我需要它来产生文字值，就像它处理选项的文本一样。

【问题讨论】：

我最近在使用下划线设置属性值时遇到了同样的问题，并找到了解决方法。不是超级漂亮，但比使用原始 HTML 更好。

【参考方案1】：

在撰写本文时，我不相信有办法。看到这个问题： https://github.com/visionmedia/jade/issues/198

我最终使用原始 HTML 来解决它，使用 |前缀。

【讨论】：

谢谢，凯文。回到 |现在让它工作......生活在最前沿......：P

这不应该是公认的答案，请参阅 Minime 的答案。

【参考方案2】：

Derick 已经提到 Jade 在更新中添加了 unescape HTML 编码的新功能，但我想为可能不认识的人添加一些附录。

- var html = "<script></script>"
| !html <-- Escaped
| #html <-- Encoded

来自https://github.com/visionmedia/jade

【讨论】：

(!&& Minime) 让我开心:)

根据jade-lang.com/reference/code !html 未转义，#html 确实转换实体

这是救命的。

【参考方案3】：

此功能已added to Jade。如果要取消转义属性值，只需使用 != 运算符：

script#my-template(type='text/template')
  a(href!='<%= url =>') Clicky clicky...

【讨论】：

这行得通！不过，似乎不适用于类属性。

@cgenco 应该，提供您的玉器版本 > 1.9.2

我知道 - I fixed it ;)

【参考方案4】：

所以我遇到了类似的问题，我想在我的一个 Jade 视图中创建一个下划线模板。在<option> 标记中设置selected 属性所需的下划线模板。

最初我尝试让下划线返回“选定”或“”。不幸的是，Jade doesn't have a way to display an attribute with no value 并没有非转义属性名称的方法（下划线位返回时没有引号）。

幸运的是，您可以取消转义属性的 值，同时保留引号。

在此示例中，我根据与字符串值匹配的所有者类型来选择下拉列表的值。我设置了一个辅助函数，这样我就不必手动转义引号了。

- 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 验证 ! 确实在这种情况下工作，我会更新我的答案。

【讨论】：

! 在 v2.0.0-alpha8 的 pug（jade 的新名称）中工作