语义UI模式在Meteor中只显示一次

Semantic UI Modal only shows up once in Meteor

本文关键字：一次 显示 模式 UI Meteor 语义      更新时间：2023-09-26

我有一个流星应用程序，它使用语义UI。我使用的是semantic:ui-css包。

我有一个名为project的模板，我想在其中显示一个模态。在那里，我创建了第二个模板，它是这样的模式：

<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

根据我的评论，这是适用于我的代码。jQuery查找多个元素似乎有问题。我创建了一个新的流星项目：

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

语义.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>

语义.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后，我可以多次打开和关闭模式。

尝试在模板的onRendered回调函数中设置模态不可分离。

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

希望能有所帮助。

相关文章：