Semantic UI Modal появляется только один раз в Meteor

Question

У меня есть приложение meteor, которое использует Semantic UI. Для этого я использую семантический пакет: ui-css.

У меня есть шаблон, называемый проектом, где я хочу показать модальный. Там для меня создал второй шаблон, который является модальным, как это:

<template name="xform"> 
    <div id="modal" class="ui modal"> 
    <i class="close icon"></i> 
    <div class="header">New Project</div> 
    <div class="content"> 
    <div class="ui form" id="newProject"> 
     <div class="one fields"> 
     <div class="field"> 
      <legend>Project Details</legend> 
      <label>Name</label> 
      <input id="name" name="name" type="text" placeholder="Project name"> 
     </div> 
     <input type="submit" class="button small createProject" style="color:white;position:relative;float:right;padding: 0.875rem 1.75rem 0.9375rem 1.75rem;font-size: 0.8125rem;" value="Create"> 
     </div> 
    </div> 
    </div> 
    <div class="actions"> 
    <div class="ui button"> 
     Cancel 
    </div> 
    <div class="ui button"> 
     Okay 
    </div> 
    </div> 
    </div> 
</template> 

Тогда я haved добавил событие к кнопке, как это, чтобы показать модальный:

Template.projects.events({ 
    'click .newProject': function(event, template){ 
    template.$('.ui.modal').modal({ 
      onDeny : function(){ 
      return false; 
      }}).modal('show'); 
    } 
}); 

Если я нажимаю кнопку в первый раз модальный открывается, как хотелось. Я вижу, что модаль теперь уже не внутри html моего шаблона, а в конце моего тела. Я могу закрыть модальный, используя кнопку закрытия, но когда я теперь попытаюсь открыть его снова, он больше не открывается. Модальный div все еще находится на дне моего тела.

Я пробовал несколько способов обхода этой проблемы, но никто не работал.

Вот мой полный код: http://i.imgur.com/r9JNrlr

Answer 1

Чтобы следить за мой комментарий, это код, который работает для меня. Это определенно кажется, что у вас есть проблема с jQuery, находящими несколько элементов. Я создал новый проект метеора:

$ meteor create semantic 
$ cd semantic 
$ meteor add semantic:ui-css 
$ meteor add iron:router 

semantic.html

<template name="MainLayout"> 
    <h1>Title</h1> 
    {{> yield}} 
</template> 

<template name="projects"> 
    {{> xform}} 
    <button class="newProject">New Project</button> 
</template> 

<template name="xform"> 
    <div id="modal" class="ui modal"> 
    <i class="close icon"></i> 
    <div class="header">New Project</div> 
    <div class="content"> 
    <div class="ui form" id="newProject"> 
     <div class="one fields"> 
     <div class="field"> 
      <legend>Project Details</legend> 
      <label>Name</label> 
      <input id="name" name="name" type="text" placeholder="Project name"> 
     </div> 
     <input type="submit" class="button small createProject" style="color:white;position:relative;float:right;padding: 0.875rem 1.75rem 0.9375rem 1.75rem;font-size: 0.8125rem;" value="Create"> 
     </div> 
    </div> 
    </div> 
    <div class="actions"> 
    <div class="ui button"> 
     Cancel 
    </div> 
    <div class="ui button"> 
     Okay 
    </div> 
    </div> 
    </div> 
</template> 

semantic.js

if (Meteor.isClient) { 
    Template.projects.events({ 
    'click .newProject': function(event, template){ 
     $('.ui.modal').modal({ 
      onDeny : function(){ 
       return false; 
      }}).modal('show'); 
    } 
    }); 

    Meteor.startup(function() { 
    Router.configure({ 
     layoutTemplate: 'MainLayout' 
    }) 
    Router.route('/',{ 
     name: 'projects' 
    }) 
    }); 
} 

После запуска meteor и загрузки http://localhost:3000 я могу открыть и закрыть модально несколько раз.

Answer 2

Попробуйте установить модальный несъемный в onRendered функцию обратного вызова шаблона.

Template.projects.onRendered(() => { 
    $('.ui.modal').modal({ detachable: false }); 
}); 

Надеюсь, это поможет.