Mustache and Haml

Haml + Mustache

I'm guessing that you're doing something like this in your Mustache:

{{description}}

If description contains HTML, you need to say:

{{{description}}}

From the fine manual:

Variables
[...]

All variables are HTML escaped by default. If you want to return unescaped HTML, use the triple mustache:
{{{name}}}.

So {{description}} will be HTML encoded by Mustache but {{{descriptipn}}} will use description as-is.

If clause in haml using variable from mustache

Mustache is logic-less as there are no if statements.

We can use tags instead.

In your case -

{{#attachment_pic_url}}
%a{ :href => "{{ attachment_url }}", :target=> "_blank"}
  %img.image{ :src => "{{ attachment_pic_url }}" }
{{/attachment_pic_url}}

If the attachment_key_url key does not exist, or exists and has a value of null, undefined, false, 0, or NaN, or is an empty string or an empty list, the block will not be rendered.

Refer https://github.com/janl/mustache.js#false-values-or-empty-lists.

_foo.mustache.haml templates

So, this works -- but it's not real template chaining (is that even possible?!)

module MustacheTemplateHandler
  def self.call(template)
    haml = "Haml::Engine.new(#{template.source.inspect}).render"
    if template.locals.include? :mustache
      "Mustache.render(#{haml}, mustache).html_safe"
    else
      haml.html_safe
    end
  end
end
ActionView::Template.register_template_handler(:mustache, MustacheTemplateHandler)

How to keep HAML from reordering words in the class attribute?

I figured it out...

If I change it from this:

.like{ class: "{{#if like}}active{{/if}}" }

to this:

%div{ class: "like{{#if like}} active{{/if}}" }

It works fine.

Is it a good idea to mix Moustache/Handlebars Templating with HAML?

I am generating mustache templates with HAML without any problems.

My HAML looks kinda like this:

.template.shop
  .foreground
    .header
      .header-logo
    .shop-description
      .table-frame
        %a.close-button{:href=>"#"} Close
        %table
          %tr
            %td.shop-images
            %td.shop-details
              %p.popup-headline.fix-width
                {{addr_name}}
              %p
                {{addr_street}} {{addr_number}}
                %br/
                {{addr_zip}} {{addr_city}}
              / {{#hasSchedule}}
              %p.popup-headline
                \Öffnungszeiten
              %table.shop-schedule
                / {{#sched_mo}}
                %tr
                  %td Mo:
                  %td {{sched_mo}}
                / {{/sched_mo}}

                ... Rest of Table omitted

This works like a charm. It gets rendered as HTML on the server which I extract from the page using jQuery on the client. I then take the HTML of the template and render it using mustache.

Because of this, you sometimes need to be careful where the mustache tags occur. For the browser they're just text so they're invalid between table rows for example. In this case put them in HTML-comments like in my example.

You could also escape the generated HTML/Mustache on the server. That wasn't feasible in my case because I wanted to have the generated template part of my HTML for easier styling.

Using mustache templates as partial views in Rails 4?

So, you can write this variables directly to yours controller.

Handlebars / Mustache with Rails url_for

I ended up just overriding url_for to handle a custom param:

module TemplateHelper

  def url_for(*args)
    options = args.extract_options!
    return super unless options.present?

    handle = options.delete(:handlebars)
    url = super(*(args.push(options)))
    handle ? url.gsub(/%7B%7B(.+)%7D%7D/){|m| "{{#{$1}}}"} : url
  end

end

So now, calling named_url(:id => '{{id}}', :handlebars => true) works as you'd expect.

---

Related Topics