Sortablejs在内部使用{{#each ...}}进行div列表，但不在div列表外部

Question

我试图在meteor中使用sortablejs来动态创建包含可以从列表移动到列表的项目的列表。

我像meteor npm install sortablejs --save

一样安装了它

当<div class="list-group"> 里面列表组div时，它正在使用多个可拖动的<div class="list-group-item> {{#each...，但它如果我在外部上使用{{#each...，并打算以编程方式创建多个列表组div，则无效。

以下是list-group div的 inside 中的{{#each...的示例代码：

<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>

以下是list-group div的 outside 上的{{#each...的非工作代码：

{{#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