CODEWITHSUNDEEP
javascriptbackbone.jsunderscore.js
Chris
Chris

Reputation: 145

Interpolate inside html attributes with Underscore.js

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

Upvotes: 6

Views: 2298

Answers (3)

Erez Rabih
Erez Rabih

Reputation: 15808

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)

Upvotes: 2

Chris
Chris

Reputation: 145

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

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

Upvotes: 4

Jack
Jack

Reputation: 11003

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.

Upvotes: 0

Related Questions