htmlpolymer-1.0

Polymer.js binding to input checked property works only one time


I have the radio group:

<input type="radio" name="menubar" id="menubar_1" checked="{{a::change}}" > A <br> 
<input type="radio" name="menubar" id="menubar_2" checked="{{b::change}}" > B <br>

Full example on Plunker

I need to track the checked propery, but after I check-up the input, the variable will always be TRUE. Maybe it a bug?

Also I can't get work 'if' template.

And one more question: how to set default checked property?


Solution

  • The problem is that change event only fires when you check a radio button, not when you uncheck it. So always you check it, it goes to true, and when you uncheck it, it dosn't trigger change event as you can see in this answer For the same reason, the dom-if never disappears.

    That doesn't happen with checkbox as you can check in this plnkr, where binding and dom-if is working with the result of checkbox.