时间戳

首页 > 解决方案 > Polymer 2.0 将 id 动态分配给

polymer-2.x - Polymer 2.0 将 id 动态分配给
    在 dom-repeat 模板中使用 this.shadowRoot.querySelector() 在数组上的观察方法中返回 null

问题描述

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

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

我尝试了 document.getElementId, this.$.querySelector 但两者都返回 null 并且 Sortablejs 创建方法会抛出需要 html el 的错误。我也试过 this.shadowRoot.querySelector(child.id) ...它也返回 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);

标签： polymer-2.xpolymer-2.0sortablejs

解决方案

为了选择你的元素，有三点：

  1. ID 标准：该值在元素的主子树中的所有 ID 中必须是唯一的，并且必须至少包含one character. 该值不得包含任何空格字符...
 <ul id="myid[[row.id]]">
  1. dom-repeat 的渲染时间。为此，您可以包装您的函数setTimeout以确保在 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'
                });
              });
            }
          })
}
  1. 您的函数的上下文未绑定到 Polymer 对象，因此最短的解决方案是使用数组函数（ES6）：
this.todos.forEach(child=> {....

代替：

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

演示

推荐阅读