使用Meteor Blaze实现模态和下拉问题

Question

我最近在尝试使用Blaze的Materialise模式和下拉功能时遇到了一些问题，特别是当每个模型有多个实例时。

我有一个名为cadcall的模板：

<template name="cadcall">
    <tr>
        <td class="truncate">{{id}}</td>
        <td>FRI</td>
        <td>{{time}}</td>
        <td>{{type}}</td>
        <td>{{location}}</td>
        <td>{{notes}}</td>
        <td>
          <a href=""><i class="material-icons call-dropdown-button" data-activates="cadcallactions">more_vert</i></a>
        </td>
    </tr>
    <div id="call-details-modal" class="modal">
        <div class="modal-content">
            <h4>Call Details</h4>
            <div class="row">
                <form class="new-call col s12">
                    <div class="row">
                        <div class="input-field col s6">
                            <input id="call-id" type="text" class="validate" disabled>
                            <label for="call-id">ID</label>
                        </div>
                        <div class="input-field col s6">
                            <input id="call-time" type="text" class="validate" disabled>
                            <label for="call-time">Time</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12">
                            <input id="call-location" type="text" autocomplete="off">
                            <label for="call-location">Location</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12">
                            <textarea id="call-notes" class="materialize-textarea" length="100000" autocomplete="off"></textarea>
                            <label for="call-notes">Notes</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" href="#!" class="modal-action modal-close waves-effect waves-grey btn-flat center">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <ul id='cadcallactions' class='dropdown-content'>
      <li><a class="callupdate" href=""><i class="material-icons">update</i>Update</a></li>
      <li><a class="callresolve" href=""><i class="material-icons">check</i>Resolve</a></li>
    </ul>
</template>

以下是cadcall事件：

Template.cadcall.events({
   'click .callresolve'(e) {
      Calls.remove(this._id);
   },
});

以下是cadcall onRendered：

Template.cadcall.onRendered(function() {
  $(document).ready(function () {
    $('.call-details').leanModal();
  });
  $('.call-dropdown-button').dropdown({
      inDuration: 300,
      outDuration: 225,
      constrainWidth: false, // Does not change width of dropdown to that of the activator
      hover: false, // Activate on hover
      gutter: 0, // Spacing from edge
      belowOrigin: true, // Displays dropdown below the button
      alignment: 'right', // Displays dropdown with edge aligned to the left of button
      stopPropagation: false // Stops event propagation
    });
});

基本上，对于Mongo数据库中的每个调用，我迭代每个调用条目。但是，如果有多个调用，则模式无法正常运行。如果我尝试关闭模态（通过在打开后点击课程callupdate，它背后的灰色区域会保留。

除了模态无法正常工作外，下拉菜单也会起到时髦的作用，特别是当我尝试删除字段时（通过单击类callresolve）。每当我尝试删除一个呼叫条目时它都可以工作，但此后其他呼叫条目的下拉菜单完全停止工作。此外，由于某种原因，当我添加条目然后删除它时，Chrome控制台中会弹出一个错误：

blaze.js:650 Uncaught Error: Must be attached
    at Blaze._DOMRange.DOMRange.containsElement (blaze.js:650)
    at Blaze._DOMRange.<anonymous> (blaze.js:2612)
    at HTMLAnchorElement.<anonymous> (blaze.js:863)
    at HTMLTableSectionElement.dispatch (jquery.js:4723)
    at HTMLTableSectionElement.elemData.handle (jquery.js:4391)

据推测，由于这些问题只发生在我有多个呼叫条目时，我认为HTML可能与呼叫条目的每次迭代冲突。有没有办法解决这个问题？