Re: Interpolating underscore.js template with HAML

1,309 views
Skip to first unread message

Les Nightingill

unread,
Aug 20, 2012, 1:34:46 PM8/20/12
to ha...@googlegroups.com
The delimiters for haml (erb) collide with the delimiters for the underscore templates...

best way I've found is to change the underscore template settings to the mustache delimiters {{ and }}

from the underscore.js docs:

_.templateSettings = {
  interpolate : /\{\{(.+?)\}\}/g
};


On Thursday, August 16, 2012 10:31:31 AM UTC-7, Ritesh Nadhani wrote:
So for my new project we are trying to use HAML/backbone.js/underscore.js templates. After reading the docs, I could figure out something like this:

    %script#album-row{ :type => 'text/template' }
      .album-row
        %a{ :href => '<%= href %>'}
          <%= name %>

While templating, "name" is correctly interpolated but I cannot get "href" to work.

Any thoughts?

Matt Wildig

unread,
Aug 20, 2012, 1:47:53 PM8/20/12
to ha...@googlegroups.com
I’m guessing your problem is that the href attribute value is being escaped:

%a{ :href => '<%= href %>'}

is becoming

<a href='&lt;%= href %&gt;'>

If so, you can use the :escape_attrs option to not escape attribute values.

A complete example:

require 'haml'

puts Haml::Engine.new(DATA.read, :escape_attrs => false).render

__END__

%script#album-row{ :type => 'text/template' }
.album-row
%a{ :href => '<%= href %>'}
<%= name %>

This should produce

<a href='<%= href %>'>

for the line in question.

Note this setting applies to all attributes in your document, you can’t currently selectively escape only some attributes.
If that’s a problem you could try changing the inderscore template deliminator as Les suggests (I haven’t actually used underscore).


Matt

Ritesh Nadhani

unread,
Aug 20, 2012, 8:53:50 PM8/20/12
to ha...@googlegroups.com
Thanks. That works for me.

Now my templates are much saner.

Duncan Beevers

unread,
Oct 28, 2012, 1:49:04 AM10/28/12
to ha...@googlegroups.com
I'm a big fan of jamesotron hamlbars https://github.com/jamesotron/hamlbars

The most basic thing the gem provides is a helper method for
generating expressions that will later hold interpolated values. The
helper method also accepts blocks, and automatically generates
appropriate opening/closing tags in the template source.

The gem is focused on generating templates that can be consumed and
processed by Handlebars/EmberJS so they're not exactly
underscore-compatible, so that may make this a non-starter for you,
but its an elegant way to deal with with difficulty of generating
closing tags in a template language that eschews them.

On Mon, Oct 15, 2012 at 5:51 PM, Bryan Li <b...@bry.li> wrote:
> This works great for getting the values off an variable. Would it work for
> if/else statements though? How do I translate the following?
>
> <% if (boolean) { %>
> <div>Blah blah</div>
> <% } %>
>
>
> On Monday, August 20, 2012 10:34:46 AM UTC-7, Les Nightingill wrote:
>>
> --
> You received this message because you are subscribed to the Google Groups
> "Haml" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/haml/-/Ra7qHxN_k2cJ.
>
> To post to this group, send email to ha...@googlegroups.com.
> To unsubscribe from this group, send email to
> haml+uns...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/haml?hl=en.
Reply all
Reply to author
Forward
0 new messages