Polymer 2 queryselector doesn't work

Question

I try to add an eventlistener to some dynamically created elements, but i cannot target them.

//here is how I try to access it
_buildTable(data)
{
    this.$.spinner.style.display = 'none';
    this.tableHead = Object.keys(data[0]);
    this.tableData = data;
    this._test();//It is called theorically after that the data has been filled
}
_test()
{   
    var link = this.shadowRoot.querySelectorAll(".link");
    //var link = Polymer.dom(this.root).querySelectorAll(".link"); //tried this but i think it is Polymer 1.x style
    //var link = document.querySelectorAll(".link"); // I tried this
    
    console.log(link);
}

<!-- Here is the HTML dom-repeat -->
<tbody>
    <template is="dom-repeat" items="{{tableData}}" as="data">
        <tr>
            <td class="link">{{data.id_Mission}}</td>
            <td>{{data.nom}}</td>
            <td>{{data.resume}}</td>
        </tr>
    </template>
  </tbody>

What am I missing,

Have a nice evening/night/day everyone

What exactly do want to achieve? Accessing the DOM directly often isn't needed in Polymer, data binding solves this in most times. — Felix Edelmann, Apr 13 '18 at 21:36
Well the problem is that I tried to do : `{{data.id_Mission}}` But the "on tap" is'nt working, so I tought I would bind a click event after. — NeitoFR, Apr 14 '18 at 07:48

score 1 · Answer 1 · answered Apr 14 '18 at 07:29

1

You are calling _test after tableData is saved, but the elements don't get stamped into the page, as the execution thread goes to the method you are calling, and will actually render them when it can. To confirm if this is the issue, try "sending to the background" your method call, have it called with a delay, but "as soon as possible", but using setTimeout.

So your method would be:

  _buildTable(data)
  {
    this.$.spinner.style.display = 'none';
    this.tableHead = Object.keys(data[0]);
    this.tableData = data;
    setTimeout(() => {
      this._test();
    });
  }

answered Apr 14 '18 at 07:29

mishu

5,347
1
21
39

Hello @mishu, the setTimeout trick is working, thank you, but I do not understand why could you gice some explanation Of wha tI understand it is linked to the "evenmential" side of javascript. I was calling the function before the rendering of the . But how putting a setTimeout without any 'time' set is working ? – NeitoFR Apr 14 '18 at 08:06
@NeitoFR that's because when you set your data the rendering of the table rows is basically in a queue, waiting for a time when it can be executed. The `setTimeout` trick also pushes the call into the queue, so it would make sure it runs after. For more details you can check this page https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop especially the part under `Zero delays` – mishu Apr 14 '18 at 11:47
You can think that the data is saved to `tableData`, but something similar to an observer needs to run to actually render the table rows, so that's why the job is in the queue and not executed immediately. So by using setTimeout you're adding something to the queue, and you're adding it *after* what was already there, that "observer". – mishu Apr 14 '18 at 11:51

Polymer 2 queryselector doesn't work

1 Answers1