javascript - 语义用户界面模态复制

Question

我在路线上有一个 Semantic-ui 模态，最初按预期工作(第一次加载应用程序)。我可以毫无问题地打开和关闭多次。如果我离开路线并再次返回，然后再次单击模态按钮(触发下面的事件)，模态 html 将被复制。每次我这样做(导航离开和返回)时，都会添加另一个模式。

我的模式分为两个模板，正如我所读，这是应该的方式。

html:

<template name="contentList">
  {{> addContent}}
  <button class="ui blue button" href="#" id="modal">
    Add Content
  </button>
</template>

<template name="addContent">
  <div id="modal" class="ui small addContent modal">
    {{>addContentForm}}
  </div>
</template>

<template name="addContentForm">
  <!-- Form HTML goes here -->
</template>

js:

Template.contentList.events({
  'click #modal': function(e, t) {
    event.preventDefault();
    $('.ui.modal')
    .modal({
      onApprove : function() {
        $('.ui.modal').modal('hide');
      }
    })
    .modal('show');
  }
});

我需要做什么来阻止这种行为？

Answer 1

我是不是觉得自己像个傻瓜...

模态 div 重复的原因是因为 {{>addContent}} 模态被放置在一个 div 中。将该代码移出 div 解决了这个问题。我的错是我的问题中的代码过于简化了!