Interpolate inside html attributes with Underscore.js

Question

I'm building an application using Backbone.js, Underscore.js, HAML, and Coffeescript.

The problem I'm having is getting variables to interpolate inside of html element attributes.

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

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

The object's values are displaying properly inside of the <td>, but not within the input's value attribute.

Is interpolation inside of an element's attributes possible? I was not able to find a solution.

Thanks

I'm not experienced in this area, but please have a look here if this is what you need. It supports coffeescript in attributes. — kubetz
– kubetz, Commented Nov 30, 2011 at 20:53
I'm not sure what's wrong with your code, but I have used interpolation with underscore templates. — Jack
– Jack, Commented Dec 1, 2011 at 3:40
The problem is with interpolation inside of html element attributes. — Chris
– Chris, Commented Dec 1, 2011 at 13:17

Chris · Accepted Answer · 2011-12-01 15:01:09Z

4

The solution to this problem is to use HAML's :escape_attrs option.

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

answered Dec 1, 2011 at 15:01

Chris

1459 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Erez Rabih · Accepted Answer · 2012-07-05 10:08:11Z

2

You can try using html_safe which is a method on String objects. This will escape the html characters in the variable statement (< for example) and will leave the intact for underscore to evaluate at runtime:

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

(Tested on rails 3.0.13)

answered Jul 5, 2012 at 10:08

Erez Rabih

15.8k3 gold badges49 silver badges67 bronze badges

2 Comments

sameers Over a year ago

This isn't working on Rails 4.2.6, but I'm not sure why. I can put the same code outside an attribute value, and my < is not escaped, but inside the attribute value, it is.

sameers Over a year ago

What I mean is, the documentation on html_safe says .html_safe is equivalent to raw() but though it is in fact equivalent outside attribute values, when passed through the HAML template engine, it's not, inside attribute values. This is very mysterious.

Jack · Accepted Answer · 2011-12-01 12:11:37Z

0

It looks like you aren't closing the function in the template properly ( try adding <% }); %> to the end of your template).

I'm not really familiar with HAML syntax but here's a simple example on jsfiddle using plain HTML and an underscore template. As you can see you can definitely use interpolation in middle of an elements attributes.

edited Dec 1, 2011 at 12:11

answered Dec 1, 2011 at 4:37

Jack

11k13 gold badges52 silver badges65 bronze badges

5 Comments

Chris Over a year ago

Sorry, I didn't include the complete code. I'm updating the question.

Chris Over a year ago

Thanks for the link. I see that they are successfully interpolating within an element's attributes.

Jack Over a year ago

Then perhaps the problem is with your HAML syntax, since if you look at the jsfiddle i linked to you can see that it correctly interpolates inside the checkbox's value attribute.

Chris Over a year ago

I missed this earlier; it appears that HAML is escaping the code inside of the element's attributes. According to the HAML documentation there is a non-haml helper that runs code in a non HAML context.

Jack Over a year ago

Then perhaps using a different style delimiters (for example mustache style) for underscore will help here's a link to underscore's documentation describing how to change the delimiters used for interpolation.

Collectives™ on Stack Overflow

Interpolate inside html attributes with Underscore.js

3 Answers 3

Comments

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related