无法查询 dom 中的元素重复设置单选按钮默认值

Question

聚合物 1.*

我正在尝试为 dom 重复的一系列 paper-radio-group 元素设置默认值。

在我填写完表格后，addFormData 函数工作正常...它可以毫无问题地查询元素。

但是当表单首次加载时，我无法查询 setRadioDefaults() 函数中的元素... radioGroups 节点列表只是一个空数组。这不是竞争条件，因为我尝试了 setTimeout 但仍然没有成功。任何想法为什么？

    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

您正在通过 Polymer 1.x 将项目移动到 ShadyDom 中，因此您需要应用 Polymer.dom() 以确保捕获其中的所有更改，请尝试 Polymer.dom(this.root).querySelectorAll('paper-radio-group');捕捉那些元素。喜欢：

<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>

无法查询 dom 中的元素重复设置单选按钮默认值

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

polymer

polymer-1.0

radio-group