Hi,
Here, you _should_ be using `Polymer.dom` when removing children. By
omitting this, you're ignoring shady DOM when deleting children, so you'll
delete both light DOM and shady DOM children at the same time. We may not
know whether the radio group has any shadow children, but if it does, we
_definitely_ don't want to mess with them. Just the light children.
Then in the last line, you add the new radio button to the shadow DOM
instead of the light DOM.
var apRadioGroup = document.querySelector('#apRadioGroup');
// removing all previous children
while (child = Polymer.dom(apRadioGroup).firstChild) {
Polymer.dom(apRadioGroup).removeChild(child);
}
this.results.forEach(function(res) {
// create and add a new element
var rb = document.createElement('paper-radio-button');
Polymer.dom(rb).setAttribute('name',res.ssid);
Polymer.dom(rb).innerHTML += res.ssid;
Polymer.dom(rb).innerHTML += ' [' + res.dBm + 'dBm]';
Polymer.dom(apRadioGroup).appendChild(rb);
});
In other words:
- Use Polymer.dom consistently when adding _and_ removing children.
- In most cases, a component should only manipulate its own shadow DOM.
If you're doing Polymer.dom(component.root) from outside component, that
might be a red flag.
Here's a jsbin with a (slightly simplified) version of the above:
http://jsbin.com/beduga/2/edit?html,output
Hope that helps.
Arthur
On Sat, Sep 26, 2015 at 2:04 PM, <[email protected]> wrote:
> Hi!
> I would like to create a a group of radio buttons dynamically in JS. But
> for some reason it doesn't work. When I put the radio buttons in manually
> it works but when I add them through JS then I can select multiple radio
> buttons at the same time. Maybe I am not updating the DOM properly. What
> could be the problem? What is the proper way of creating radio-buttons
> inside radio-group through JS?
> Thank you.
> var apRadioGroup = document.querySelector('#apRadioGroup');
> // removing all previous children
> while (apRadioGroup.firstChild) {
> apRadioGroup.removeChild(apRadioGroup.firstChild);
> }
> results.forEach(function(res) {
> // create and add a new element
> var rb = document.createElement('paper-radio-button');
> Polymer.dom(rb).setAttribute('name',res.ssid);
> Polymer.dom(rb).innerHTML += res.ssid;
> Polymer.dom(rb).innerHTML += ' [' + res.dBm + 'dBm]';
> Polymer.dom(apRadioGroup.root).appendChild(rb);
> });
>
>
> Follow Polymer on Google+: plus.google.com/107187849809354688692
> ---
> You received this message because you are subscribed to the Google Groups
> "Polymer" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/polymer-dev/150d1aee-c681-44f3-bcb5-d9d2669c297f%40googlegroups.com
> <https://groups.google.com/d/msgid/polymer-dev/150d1aee-c681-44f3-bcb5-d9d2669c297f%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
> For more options, visit https://groups.google.com/d/optout.
>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/CADSbU_x_%2B1tgYM%2BsSdvvnVEwvjXrCLOsPGGgZwjYuM3J-YEVEw%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
