使用 Underscore.js 插入 html 属性答案

【问题标题】：Interpolate inside html attributes with Underscore.js使用 Underscore.js 插入 html 属性
【发布时间】：2011-11-30 20:17:16
【问题描述】：

我正在使用 Backbone.js、Underscore.js、HAML 和 Coffeescript 构建一个应用程序。

我遇到的问题是让变量插入到 html 元素属性中。

<% _.each(collection.models, function(document) { %>
%tr
  %td
    %input{:type => 'checkbox', :name => "documents[]", :value => "<%= document.attributes.id %>"}
  %td <%= document.attributes.id %>
  %td <%= document.attributes.name %>

  <% } %>
<% }); %>

对象的值在 <td> 内正确显示，但不在输入的 value 属性内。

是否可以在元素属性内进行插值？我无法找到解决方案。

谢谢

【问题讨论】：

我在这方面没有经验，但如果您需要，请查看here。它在属性中支持咖啡脚本。
我不确定您的代码有什么问题，但我使用了带下划线模板的插值。
问题在于 html 元素属性内部的插值。

标签： javascript backbone.js underscore.js

【解决方案1】：

解决这个问题的方法是使用 HAML 的:escape_attrs 选项。

Haml::Engine.new(template, :escape_attrs => false).render

【讨论】：

【解决方案2】：

您可以尝试使用 html_safe，它是 String 对象的一种方法。这将转义变量语句中的 html 字符（例如

%input{:type => 'checkbox', :name => "documents[]", :value => "<%= document.attributes.id %>".html_safe}

（在 Rails 3.0.13 上测试）

【讨论】：

这不适用于 Rails 4.2.6，但我不知道为什么。我可以将相同的代码放在属性值之外，我的< 没有被转义，但在属性值内，它是。
我的意思是，the documentation on html_safe 说.html_safe 等价于raw() 但虽然它实际上是等价的外部属性值，但当通过 HAML 模板引擎传递时，它不是内部属性价值观。这很神秘。

【解决方案3】：

您似乎没有正确关闭模板中的函数（尝试在模板末尾添加<% }); %>）。

我对 HAML 语法不是很熟悉，但这里有一个使用纯 HTML 和下划线模板的 jsfiddle 上的简单示例。如您所见，您绝对可以在元素属性中间使用插值。

【讨论】：

抱歉，我没有包含完整的代码。我正在更新问题。
感谢您的链接。我看到它们成功地插入到元素的属性中。
那么问题可能出在您的 HAML 语法上，因为如果您查看我链接到的 jsfiddle，您会发现它正确地插入到复选框的 value 属性中。
我之前错过了这个；似乎 HAML 正在转义元素属性内的代码。根据 HAML 文档，有一个在非 HAML 上下文中运行代码的非 haml 助手。
那么也许对下划线使用不同样式的定界符（例如胡子样式）将有助于这里有一个link 来下划线的文档，描述如何更改用于插值的定界符。