我正在尝试在 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> [[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);