Add a class to polymer element

Question

Everytime a checkbox inside my template is selected, I want to add a class to my polymer element or change polymer element's attribute.

Since my element uses label for attribute, I bound the ID of the checkbox to when instantiating the element in my markup

<label for="{{uniqueid}}" on-tap="{{toggle}}" />
  <input type="checkbox" id="{{uniqueid}}" class="select" checked="{{checker}}">
  <img src="{{image}}" alt="" class="prod-img">
  <div class="grid-details">
    <span>{{designer}}</span>
    <span>{{product}}</span>
    <span>{{currency}} {{price}}</span>
    <span>Shipped from {{info}}</span>
  </div>
</label>

I would then call the element like so

<gmselect-element uniqueid="four" image="http://i.imgur.com/fkq1QKq.jpg" designer="CUCARELIQUIA" product="Castellano Suede Bag Redder" info="Gijon, Spain" price="650" currency="$"></gmselect-element>

My toggle function looks like below

toggle: function() {
    this.$.grid.setAttribute("class", "grid true");
    this.setAttribute("selected", "true");
  }

However, instead of setting it to true here, I would like to check the value of the checkbox's checked property. Since ID is not static, I can't get element using the $ functionality. I also don't know how to escape a data bound in moustache's to get its value inside a method.

Answer 1

You've bound the checked value to {{checker}}, so you should be able to just refer to this.checker in your toggle function.

If you need to, you can also get the model data from the event. See:

https://www.polymer-project.org/1.0/docs/devguide/data-binding

Answer 2

this.$.grid.classList.add('classname')

this.$.grid.classList.remove('classname')