Polymer 2.0 将 id 动态分配给 dom 中的 <ul> - 使用 this.shadowRoot.querySelector() 在数组的观察方法中重复模板 returns null

Question

我正在尝试在 Polymer2.0 应用程序中实现 Sortablejs，其中我动态地将 ID 分配给 dom 重复模板中的 ul 元素。

我遇到的问题是无法在数据列表todos的观察者方法中访问带有id的ul。

我试过 document.getElementId, this.$.querySelector 但是 return null 和 Sortablejs create 方法都抛出错误，需要 html el。我也试过 this.shadowRoot.querySelector(child.id) ...它也 returned null.

自从过去 2 天以来，我一直在努力让它工作。我需要做什么来修复它？请帮忙

<!DOCTYPE html>

<dom-module id="t-page">
<script src="http://SortableJS.github.io/Sortable/Sortable.js"> . 
</script>

<template is="dom-bind">
<style include="shared-styles">
 ....
</style>

<div class="board__sprint">
  <template is="dom-repeat" items="{{todos}}" as="row">
    <div class="list">
      <div class="list-content">
          <ul id="[[row.id]]"> 
          <!-- id is v789878 (some random unique number prefix by v per row -->
            <template is="dom-repeat" items="{{row.tasks}}" as="todo">
              <li>
                <div class="ticket" data-index$="{{todo.id}}">
                  <paper-card style="float:center; width: 100%;" class="singleColor" data-index$="{{todo}}"
                    data-index$="{{row}}">
                        <h7 class="banksTitle" style="color: black; font-size: 12px; text-align:left;">
                          <b>[{{index}}]</b> &nbsp; &nbsp; [[todo.actTitle]]
                        </h7>
                        <h7 class="banksTitle" style="color: grey; font-size: 12px; text-align:left;">
                          [[todo.actDesc]]
                        </h7>
                  </paper-card>
                </div>
              </li>
            </template>
          </ul>
        </div>

        <div class="addTicket">
          <paper-button raised class="blue" on-tap="_addTicketDialog" row={{row}}>Add Ticket</paper-button>
        </div>
      </div>
    </div>
  </template>
</div>

 <script>
  /**
   * @polymer
   * @extends HTMLElement
   */
  class TPage extends Polymer.Element {

  static get is() {
    return 't-page';
  }

  static get properties() {
    return {
      todos: {
        type: Object,
        notify: true,
        observer: '_todosChanged'
      },
   ....
   }

   _todosChanged() {
    console.log('this.todos.length = ' + this.todos.length);
    if (this.todos !== null || this.todos !== undefined) {
      var self = this;
      this.todos.forEach(function (child) {
       Sortable.create(self.$.querySelector(child.id), {
          group: 'shared'
        });
      });
    }
  }

window.customElements.define(TPage.is, TPage);

Answer 1

三点才能select你的元素：

Id standards: The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters...

 <ul id="myid[[row.id]]">

Rendering timing of dom-repeat. For this you may wrap your function setTimeout to be sure to render your all items in dom-repeat.

_todosChanged() {
        setTimeout(()=>{ 
            console.log('this.todos.length = ' + this.todos.length);
            if (this.todos !== null || this.todos !== undefined) {
               var self = this
              this.todos.forEach(child=> {
               console.log(child.id)
               var selector = this.shadowRoot.querySelector('#myid'+child.id);
               Sortable.create(selector, {
                  group: 'shared'
                });
              });
            }
          })
}

The context of your function is not bound to the Polymer object, So the shortest solution is use array function ( ES6 ):

this.todos.forEach(child=> {....

而不是：

this.todos.forEach(function (child) {...

Demo

Polymer 2.0 将 id 动态分配给 dom 中的 <ul> - 使用 this.shadowRoot.querySelector() 在数组的观察方法中重复模板 returns null

Polymer 2.0 dynamically assigned id to a <ul> in dom-repeat template returns null in observe method on a array using this.shadowRoot.querySelector()

sortablejs

polymer-2.x

polymer-2.0