Sortablejs работает с div-списком, где {{#each... }} находится внутри, а не за его пределами.

Question

Я пытаюсь использовать sortablejs в метеоре для динамического создания списков с элементами, которые можно перемещать из списка в список.

Я установил это так meteor npm install sortablejs --save

Это работает на <div class="list-group"> с несколькими перетаскиваемыми <div class="list-group-item>когда {{#each... находится внутри списка list-div, но он не работает, если я использую {{#each... снаружи с целью программного создания нескольких элементов списка групп.

Вот пример кода {{#each... на внутренней стороне списка div-группы:

<div class="list-group" id="unassignedCensusTracts" style="cursor: move">
    {{#each censusTractsInTerritory "rec3UvlTOifMbsmnq"}}`

                    <div class="list-group-item">{{number}} ({{county}})
                        <BR> confirmed: {{confirmedQty}} |
                        unconfirmed: {{unconfirmedQty}}
                   </div>
    {{/each}}
</div>

Вот нерабочий код с {{#each... снаружи списка div-группы:

{{#each territories}}
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">{{county}}{{number}}</h3>
            </div>
            <div class="panel-body">
                <div class="list-group" id="censusTractsInTerritory{{@index}}" style="cursor: move">
                    {{#each censusTractsInTerritory _id}}
                        <div class="list-group-item">{{number}} | #{{qty}}</div>
                    {{/each}}
        </div>
    </div>
    <div class="panel-footer">confirmed: {{confirmedQty}} | total: {{contactsQty}}</div>
    </div>
{{/each}}

Вот шаблон... Функция onRendered:

Template.makeTerritories.onRendered(function () {
    console.log(this)
    // debugger
    Sortable.create(document.getElementById('unassignedCensusTracts'),
        {
            group: {
                pull: true,
                put: true,
                name: 'unassignedCensusTracts'
            },
            sort: false,
            ghostClass: 'ghost'
        }
    )
    // debugger
    Sortable.create(document.getElementById('censusTractsInTerritory0'),
        {
            group: {
                pull: true,
                put: true,
                name: 'censusTractsInTerritory0'
            },
            sort: false,
            ghostClass: 'ghost',
        }
    )
    debugger
})

Обратите внимание, что браузер не приостанавливает работу отладчика, поэтому я полагаю, что второй файл Sortable.create не работает. Ошибка в консоли:

Exception from Tracker afterFlush function: meteor.js?hash=e3f53db…:932
undefined