Can not query elements in a dom repeat to set radio button defaults

Question

Polymer 1.*

I am trying to set the defaults in a series of paper-radio-group elements that live in a dom repeat.

After I fill out the form, the addFormData function works fine...it can query the elements with no problem.

But when the form first loads, I can not query the elements in the setRadioDefaults() function... the radioGroups node list is just a empty array. It's not a race condition because I tried a setTimeout and still no success. Any ideas why?

    addFormData: function(body) {
      // WORKS GOOD, IT FINDS THE ELEMENTS
      var radioGroups =
        this.$$('#activeForm').querySelectorAll('paper-radio-group');

      var radioGroupsArray = Array.prototype.slice.call(radioGroups);

      return radioGroupsArray.map(function(radioGroup) {
        var fieldID = radioGroup.attrForItemTitle;
        var value = radioGroup.selected;

        return {
          field_id: fieldID,
          value: value
        };
      });
    },

    setRadioDefaults: function() {
      Polymer.dom.flush();
      // WORKS BAD, DOES NOT FIND THE ELEMENTS
      var radioGroups =
        this.$$('#activeForm').querySelectorAll('paper-radio-group');

      radioGroups.forEach(function(radio) {
        radio.selected = this.noData;
      });
    },

---

 <template
        is="dom-repeat"
        items="[[fields]]"
        filter="_computeField">

        <div class="row">
          <label class="col1">
            [[item.field_label]]
          </label>

          <paper-radio-group
            attr-for-item-title="[[item.field_id]]"
            attr-for-selected="value"
            on-paper-radio-group-changed="_syncGlobalRadioBtns">
            <paper-radio-button
              value="[[yes]]"
              name="[[item.field_id]]"></paper-radio-button>
            <paper-radio-button
              value="[[no]]"
              name="[[item.field_id]]"></paper-radio-button>
            <paper-radio-button
              value="[[incomplete]]"
              name="[[item.field_id]]"></paper-radio-button>
          </paper-radio-group>
        </div>
      </template>

    --------------------

    setRadioDefaults: function() {
      console.log('aaa');

      Polymer.dom.flush();
      var radioGroups =
        Polymer.dom(this.root).querySelectorAll('paper-radio-group');
      console.log(radioGroups);

      radioGroups.forEach(function(radio) {
        radio.selected = this.incomplete;
      }, this)

Answer 1

You're moving items into the ShadyDom via Polymer 1.x so you'll need to apply Polymer.dom() to make sure you catch all the changes there in, try Polymer.dom(this.root).querySelectorAll('paper-radio-group'); to capture those elements. Like:

<link rel="import"  href="https://polygit.org/polymer+^1.9.1/webcomponentsjs+^0.7.0/components/polymer/polymer.html">

<dom-module id="configurable-name-tag">

  <template>
    <!-- bind to the "owner" property -->
    <template on-dom-change="doStuff" is="dom-repeat" items="[[items]]">
      <div>[[item]]</div>
    </template>

  </template>

  <script>
    Polymer({
      is: "configurable-name-tag",
      properties: {
        // declare the owner property
        items: {
          type: Array,
          value: function() {
            return [1,2,3,4];
          }
        }
      },
      doStuff: function() {
        Polymer.dom.flush();

        alert(Polymer.dom(this.root).querySelectorAll('div').length);
      }
    });
  </script>

</dom-module>