Question

如果数据被硬编码为属性值，我可以在dom-repeat内部定位元素。但是，使用iron-ajax导入数据时，this.$$(selector)会返回null。

自定义元素

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-collapse/iron-collapse.html"/>
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html"/>
<link rel="import" href="../../bower_components/polymer-sortablejs/polymer-sortablejs.html"/>

<dom-module id="sortable-math">

  <template>
    <style>
      :host {
        display: block;
      }

      .math {
        display: block;
        padding: 20px 0;
        border-bottom: 1px solid #cccccc;
      }

      .total {
        border-top: 1px solid #cccccc;
      }
    </style>

    <h1>Math +</h1>

    <div id="empty-div"></div>

    <iron-ajax
        auto
        id="numbersDataRequest"
        url="../data/numbers.json"
        handle-as="json"
        on-response="numbersDataResponse">
    </iron-ajax>

    <div>
      <sortable-js>
        <template is="dom-repeat" items="{{numbersData}}">
          <div id="math-{{index}}" class="math">
            <table>
              <tr>
                <td class="givenNumber" on-click="toggle" toggle-id$="{{index}}">
                  {{item.givenNumber}}
                </td>
              </tr>
              <tr>
                <td class="toAdd">
                  + {{item.toAdd}}
                </td>
              </tr>
              <tr>
                <td id="total-{{index}}" class="total">?</td>
                <td></td>
              </tr>
            </table>

            <iron-collapse id$="collapsible-{{index}}">
              <div>Hint</div>
            </iron-collapse>
          </div>
        </template>
      </sortable-js>

  </div>

  </template>

  <script>
    Polymer({
      is: 'sortable-math',

      properties: {
        numbersData: {
          type: Array
        }
      },

      ready: function() {
        console.log(this.$$('#empty-div'));
      },

      _onSort: function(evt){
        console.log('sorted');
      },

      /*
      //Not working either

      attached: function(){
        this.async(function() {
          this.$$('#empty-div').innerHTML = 'Empty no more.'; //This works.
          console.log(this.$$('#math-1')); //Returns null
        });
      },

      */

      toggle: function (e, detail, sender) {
        var target = Polymer.dom(e).rootTarget.getAttribute('toggle-id'),
            selector = '#collapsible-' + target;
        this.$$(selector).toggle();
        console.log(this.$$('#math-1')); 
      },

      numbersDataResponse: function (data) {
        //console.log('numbersDataResponse');
        this.numbersData = data.detail.response;
        this.$$('#empty-div').innerHTML = 'Empty no more.'; //This works.

        //Attempt to target element created with dom-repeat
        console.log(this.$$('#math-0')); //Returns null
        console.log(this.$$('#math-0 #total-0')); //Returns null
        console.log(this.$$('#math-0 .total')); //Returns null
      }
    });

    var targetEl = function(ref, selector){
      return Polymer.dom(ref).querySelector(selector);
    }



  </script>
</dom-module>

JSON

[
  {
    "givenNumber": "3",
    "toAdd": "2"
  },
  {
    "givenNumber": "?",
    "toAdd": "5"
  },
  {
    "givenNumber": "?",
    "toAdd": "10"
  },
  {
    "givenNumber": "?",
    "toAdd": "7"
  }
]

其他信息

我想做什么：

获取#math-0 .givenNumber（3）
获取#math-0 .toAdd :( 2）
计算总数（5）并将其附加到#math-1 .givenNumber
获取#math-1 .givenNumber :( 5）
获取#math-1 .toAdd :( 5）
计算总数（10）并将其附加到#math-2 .givenNumber

依旧......

不计算查看

3 + 2 =？
？ + 5 =？
？ + 10 =？
？ + 7 =？

计算后查看

3 + 2 = 5
5 + 5 = 10
10 + 10 = 20
20 + 7 = 27

谢谢！

Answer 1

您需要在转发器有机会加盖转发器之前查询转发器的项目，这会产生#include <stdio.h> #include <ctype.h> int main() { char line[200]; printf("Enter a string: \n"); while(fgets(line, sizeof(line),stdin)) { int numberAlpha = 0; int numberDigit = 0; if(isalpha(line)) numberAlpha++; else if(isdigit(line)) numberDigit++; if(numberAlpha+numberDigit>10 && numberDigit>3) printf("%s \n", line); } return 0; }。在查询项目之前，您可以等到下一次使用null渲染之后：

Polymer.RenderStatus.afterNextRender()

...或者您可以等到当前微任务结束（包括模板转发器渲染）：

Polymer.RenderStatus.afterNextRender(this, () => {
  console.log('math-0 (after render)', this.$$('#math-0'));
});

＆＃13;

this.async(() => {
  console.log('math-0 (after microtask)', this.$$('#math-0'))
});

＆＃13;

codepen

Answer 2

因为dom-repeat需要时间来绑定，所以参数将在调用之后直接设置有时差，建议等待再调用它

英语不好，希望你明白，谢谢

jsbin

Polymer ::当使用iron-ajax导入数据时，无法在dom-repeat内部定位元素

2 个答案: