Я пытаюсь реализовать Sortablejs в приложении Polymer2.0, где я динамически назначаю идентификаторы элементу ul в шаблоне повторения dom.
Проблема в том, что я не могу получить доступ к ul с идентификатором в методе наблюдателя списка задач.
Я пробовал document.getElementId, this. $. QuerySelector, но оба возвращают null, а метод создания Sortablejs выдает ошибку, что требуется html el. Я также попытался this.shadowRoot.querySelector (child.id) ... он также возвратил ноль.
Я борюсь с прошлыми 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);