流星/语义UI中的错误? [英] Bug in Meteor/Semantic-UI?
问题描述
如果根元素是流星模板，则无法使用语义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标记，这将导致两个$ dimmers.因此，当调用$ dimmer.on时，它实际上是一个数组，语义ui代码将不得不调用$ dimmer [i] .on(其中i为0和1)，并且这种方式不起作用. /p>
因此将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>
这也可行，但是我认为第一种方法是干净/流星"方法.
the usage of a semantic-ui modal window does not work if the root-element is a meteor template:
package: semantic-ui-css
Error reproduction:
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>
And in Javascript (hello.js) code:
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');
});
The error is:
TypeError: $dimmer.on is not a function
semanti...27ec43c (Line 5786)
Does anyone know how to solve this?
The root element being a template is not the problem. The problem is having the BODY tag in the template. You wind up with two BODY tags, which leads to having two $dimmers. So when $dimmer.on is called, it is actually an array and the semantic-ui code would have to call $dimmer[i].on (where i would be 0 and 1) and it doesn't work that way.
So change hello.html to:
<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>
And create a layout (layout.html):
<head>
<title>Hello Error</title>
</head>
<body>
<h1>Reproduce error</h1>
{{> navigation}}
</body>
That works.
Of course you could just remove the BODY tag from hello.html:
<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>
That works too, but I think the first approach is the clean/Meteor way.
这篇关于流星/语义UI中的错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
