Re: [polymer-dev] Polymer DOM API and paper-radio-group

[Arthur Evans]

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, <pet...@gmail.com> 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 polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/150d1aee-c681-44f3-bcb5-d9d2669c297f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.