Question

我有一个使用Semantic UI的流星应用程序。我正在使用语义：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

Answer 1

要跟进我的评论，这是适合我的代码。看起来你肯定有一个问题，jQuery找到多个元素。我创建了一个新的流星项目：

<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.html

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'
    })
  });
}

<强> semantic.js

meteor

运行http://localhost:3000并加载import "dart:async"; import "dart:isolate"; main() { var rPort1 = new ReceivePort(); var rPort2 = new ReceivePort(); var p1 = 0; rPort1.listen((partial) { print("p1 ${partial}"); p1 = partial; rPort1.close(); }); var p2 = 0; rPort2.listen((partial) { print("p2 ${partial}"); p2 = partial; rPort2.close(); }); Isolate.spawnUri(new Uri.file("MyIsolate.dart"), [arg0, ...], rPort1.sendPort); Isolate.spawnUri(new Uri.file("MyIsolate.dart"), [arg0, ...], rPort2.sendPort); var p3 = p1 + p2; print("p3 ${p3}"); }后，我可以多次打开和关闭模式。

Answer 2

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

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

希望它有所帮助。

语义UI模态仅在Meteor中显示一次

2 个答案: