流星/语义ui中的Bug

Bug in Meteor/Semantic-UI?

本文关键字：中的 Bug ui 语义 流星      更新时间：2023-09-26

如果根元素是流星模板，则语义ui模态窗口的使用不起作用:

包:semantic-ui-css

错误复制:

hello.html: 

<template name="hello">
    <head>
        <title>Hello Error</title>
    </head>
    <body>
    <h1>Reproduce error</h1>
    {{> navigation}}
    <div class="delete openModal">OPEN<i class="close icon"></i></div>
    <div id="modalView" class="ui modal">
        <div class="content">
            <div class="ui fluid input">
                Modal Error Test
            </div>
        </div>
        <div class="actions">
            <div class="ui button cancel">Cancel</div>
            <div class="ui button ok">OK</div>
        </div>
    </div>
    </body>
</template>
<template name="navigation">
    <div class="ui menu">
        <a class="item" id="home" href="/">
            <i class="home icon"></i> welcome
        </a>

    </div>
</template>

在Javascript (hello.js)代码中:

if (Meteor.isClient) {
  Template.hello.events({
    'click .openModal': function (event,template) {
      $('#modalView')
          .modal({
            onDeny    : function(){
              console.log('canceled');
            },
            onApprove : function() {
              console.log("yeah!");
            }
          })
          .modal('show')
      ;
    }
  });
}
if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}
Router.route('/', function () {
    this.render('hello');
});

错误是:

TypeError: $dimmer.on is not a function
semanti...27ec43c (Line 5786)

有人知道怎么解决这个问题吗?

根元素是模板不是问题。问题是在模板中有BODY标记。你结束了两个BODY标签，这导致有两个$调光器。所以当美元变暗时。当它被调用时，它实际上是一个数组，语义界面代码必须调用$dimmer[i]。On(这里我将是0和1)，它不会这样工作

所以把hello.html改成:

<template name="hello">
    <div class="delete openModal">OPEN<i class="close icon"></i></div>
    <div id="modalView" class="ui modal">
        <div class="content">
            <div class="ui fluid input">
                Modal Error Test
            </div>
        </div>
        <div class="actions">
            <div class="ui button cancel">Cancel</div>
            <div class="ui button ok">OK</div>
        </div>
    </div>
</template>
<template name="navigation">
    <div class="ui menu">
        <a class="item" id="home" href="/">
            <i class="home icon"></i> welcome
        </a>
    </div>
</template>

创建一个布局(layout.html):

<head>
  <title>Hello Error</title>
</head>
<body>
  <h1>Reproduce error</h1>
  {{> navigation}}
</body>

。

当然你可以直接从hello.html:

中删除BODY标签
<template name="hello">
    <head>
        <title>Hello Error</title>
    </head>
    <h1>Reproduce error</h1>
    {{> navigation}}
    <div class="delete openModal">OPEN<i class="close icon"></i></div>
    <div id="modalView" class="ui modal">
        <div class="content">
            <div class="ui fluid input">
                Modal Error Test
            </div>
        </div>
        <div class="actions">
            <div class="ui button cancel">Cancel</div>
            <div class="ui button ok">OK</div>
        </div>
    </div>
</template>
<template name="navigation">
    <div class="ui menu">
        <a class="item" id="home" href="/">
            <i class="home icon"></i> welcome
        </a>

    </div>
</template>

这也可以，但我认为第一种方法是干净的/Meteor方式。

相关文章：