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

У меня есть метеорное приложение, которое использует семантический пользовательский интерфейс. Для этого я использую пакет semantic: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>

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

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


javascript jquery css meteor semantic-ui
person Sebi55    schedule 23.06.2015    source источник
comment
Вы в основном ответили на вопрос, семантический модальный код пользовательского интерфейса перемещает div в нижнюю часть тела, поэтому, когда вы вызываете template.$('.ui.modal')..., вы только «ищете» .ui.modal внутри шаблона - в данном случае шаблон «проекты». Самым простым, хотя и не обязательно правильным способом, было бы просто использовать глобальный объект jQuery $('.ui.modal'). Под не обязательно правильным я подразумеваю, что вы, вероятно, должны ссылаться на него с уникальным атрибутом id, чтобы избежать конфликтов между несколькими модальными окнами.   -  person Michael Mason    schedule 23.06.2015
comment
Я попробовал это так, как вы только что описали, просто используя jQuery без ссылки на шаблон, но затем я получаю Uncaught TypeError: $(...).modal не является функцией. Я не могу понять, почему это происходит.   -  person Sebi55    schedule 23.06.2015
comment
Странно, я только что создал тестовый код, и он у меня работает нормально. Есть ли в ваших шаблонах тег ‹body›? Интересно, похожа ли эта проблема на решенную здесь: stackoverflow.com/a/30381769/2723753   -  person Michael Mason    schedule 23.06.2015
comment
Нет, я использую IronRouter и загружаю layoutTemplate, который имеет заголовок и показывает содержимое в yield. У меня нет тега тела, так как Iron Router делает это за меня. Это проблема?   -  person Sebi55    schedule 23.06.2015

Ответы (2)


arrow_upward
1
arrow_downward

Чтобы продолжить мой комментарий, это код, который работает для меня. Определенно похоже, что у вас есть проблема с 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 я могу открывать и закрывать модальное окно несколько раз.

person Michael Mason    schedule 23.06.2015
comment
Я изменил строку jquery, чтобы использовать $('#modal'), а не класс, который должен предотвращать эти вещи, но он все еще не работает. - person Sebi55; 23.06.2015
comment
Если я делаю console.log($('#modal')) в своем проекте и внутри кода, который вы использовали (который, по-видимому, также работает для меня), они оба показывают одно и то же, но внутри моего проекта проблема все еще существует. - person Sebi55; 24.06.2015
comment
Я до сих пор не могу найти ошибку. У меня такая же структура, как у вас. - person Sebi55; 28.06.2015

arrow_upward
0
arrow_downward

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

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

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

person Max Hsu    schedule 03.03.2017