Using Polymer conditional attributes with HAML

Question

According to the documentation for Polymer expressions, you can bind data to conditionally assign an attribute using the conditional attribute syntax:

Conditional attributes

For boolean attributes, you can control whether or not the attribute appears using the special conditional attribute syntax:
attribute?={{boolean-expression}}

That's great, but I'm using HAML where attributes are assigned to elements like this:

%element{attribute: "value"}

I can't add a question mark before that colon without HAML giving me a syntax error.

So how can I use Polymer's conditional attributes (or a functional equivalent) when I'm using HAML to generate my HTML?

Ajedi32 Ajedi32 · Accepted Answer · 2015-05-10T21:34:01

One potential solution is to use the :plain filter to insert raw HTML into your HAML file:

:plain
  <element attribute?={{boolean-expression}}></element>

A bit ugly, but it seems to work.

If you need to enclose some HAML-generated tags in one of these plain HTML tags, you'll need to use the :plain filter twice; once for the opening tag, and once for the closing tag.

:plain
  <element attribute?={{boolean-expression}}>
-# HAML Content Here
:plain
  </element>

Be sure not to indent your HAML code after the opening tag, otherwise it will become part of the "raw HTML" output and get sent as plain text to the browser instead of being processed as HAML.

Using Polymer conditional attributes with HAML

Conditional attributes

2 Answers