Meteor/Semantic-UI 中的错误？答案

【问题标题】：Bug in Meteor/Semantic-UI?Meteor/Semantic-UI 中的错误？
【发布时间】：2015-05-21 11:59:25
【问题描述】：

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

包：semantic-ui-css

错误重现：

你好.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)

有人知道怎么解决吗？

【问题讨论】：

标签： javascript meteor semantic-ui

【解决方案1】：

作为模板的根元素不是问题。问题是模板中有BODY 标记。你最终得到了两个BODY 标签，这导致有两个$dimmers。因此，当调用 $dimmer.on 时，它实际上是一个数组，语义 UI 代码必须调用 $dimmer[i].on（其中 i 为 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>

这也有效，但我认为第一种方法是 clean/Meteor 方式。

【讨论】：

非常感谢！它解决了问题，解释很好理解原因。