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

Question

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

---

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

这是我的 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 编码？我需要它来产生文字值，就像它对选项的文本所做的那样。

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

我最终使用 | 进入原始 HTML 来解决它。字首。

Answer 4

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

最初我尝试让下划线返回“选定”或“”。不幸的是，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 验证!{}在这种情况下确实有效，我会更新我的答案。