Javascript Meteor/语义用户界面中的Bug？_Javascript_Meteor_Semantic Ui

Javascript Meteor/语义用户界面中的Bug？

javascript meteor

Javascript Meteor/语义用户界面中的Bug？,javascript,meteor,semantic-ui,Javascript,Meteor,Semantic Ui,如果根元素是meteor模板，则语义ui模式窗口的使用不起作用：包：语义ui css 错误再现： hello.html： <template name="hello"> <head> <title>Hello Error</title> </head> <body> <h1>Reproduce error</h1> {{> navig

如果根元素是meteor模板，则语义ui模式窗口的使用不起作用：

包：语义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>

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

错误是：

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

有人知道如何解决这个问题吗？

作为模板的根元素不是问题所在。问题在于模板中有

BODY

标记。最后你会得到两个

BODY

标签，这会导致你有两个$dimmer。因此，当调用$dimmer.on时，它实际上是一个数组，语义用户界面代码必须调用$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>

这同样有效，但我认为第一种方法是清洁/流星方式。

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

<head>
  <title>Hello Error</title>
</head>

<body>
  <h1>Reproduce error</h1>
  {{> navigation}}
</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>