[英]METEOR: How to manipulate class with session?
我目前正在学习流星会议
当用户单击全部时,将返回以下内容:
<div class="ui secondary pointing menu">
<a id="all" class="item active">All</a>
<a id="fiction" class="item">Fiction</a>
<a id="nonfiction" class="item">Non Fiction</a>
</div>
当用户单击小说时,小说将像这样返回:
<div class="ui secondary pointing menu">
<a id="all" class="item">All</a>
<a id="fiction" class="item active">Fiction</a>
<a id="nonfiction" class="item">Non Fiction</a>
</div>
当用户单击“非小说”时,将返回以下内容:
<div class="ui secondary pointing menu">
<a id="all" class="item">All</a>
<a id="fiction" class="item">Fiction</a>
<a id="nonfiction" class="item active">Non Fiction</a>
</div>
这是我的模板:
<template name="bookList">
<div class="ui secondary pointing menu">
<a id="all" class="item{{selectedTab}}">All</a>
<a id="fiction" class="item{{selectedTab}}">Fiction</a>
<a id="nonfiction" class="item{{selectedTab}}">Non Fiction</a>
</div>
</template>
这是我的助手:
Session.set('tabAll', ' active');
Session.set('tabFiction', '');
Session.set('tabNonFiction', '');
Template.bookList.helpers({
selectedTab: function() {
Session.get("tabAll");
Session.get("tabFiction");
Session.get("tabNonFiction");
}
});
Template.bookList.events({
'click #all': function () {
Session.set('tabAll', ' active');
Session.set('tabFiction', '');
Session.set('tabNonFiction', '');
},
'click #fiction': function () {
Session.set('tabAll', '');
Session.set('tabFiction', ' active');
Session.set('tabNonFiction', '');
},
'click #nonfiction': function () {
Session.set('tabAll', '');
Session.set('tabFiction', '');
Session.set('tabNonFiction', ' active');
},
});
但这不起作用。 如果有人纠正我的错误会很高兴
谢谢..
我看到了很多错误,所以这是一个简单的工作示例,您可以看到您在哪里犯了错误
模板调用helper函数并为其提供一个参数,在这种情况下,我们要检查的选项卡处于活动状态。
<template name="bookList">
<div class="ui secondary pointing menu">
<a id="all" class="item {{selectedTab "all"}}">All</a>
<a id="fiction" class="item {{selectedTab "fiction"}}">Fiction</a>
<a id="nonfiction" class="item {{selectedTab "nonfiction"}}">Non Fiction</a>
</div>
</template>
助手助手将检查会话值是否等于要检查的选项卡,如果返回,则返回“活动”
Template.bookList.helpers({
selectedTab: function(tab) {
var activeTab = Session.get('activeTab');
if (activeTab === tab) {
return 'active';
}
}
});
事件只会更改会话值,并且模板中的值会被迅速更改
Template.chapterList.events({
'click #all': function () {
Session.set('activeTab', 'all');
},
'click #fiction': function () {
Session.set('activeTab', 'fiction');
},
'click #nonfiction': function () {
Session.set('activeTab', 'nonfiction');
},
});
这是一个演示应用程序示例: http : //meteorpad.com/pad/tAsjEJd34YRCfFbeB/BooksList
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.