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.