[英]Bug in Meteor/Semantic-UI?
如果root-element是流星模板,則使用語義-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(其中我將為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>
這也有效,但我認為第一種方法是清潔/流星方式。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.