我目前正在学习流星会话
当用户点击All将返回如下:
<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>
当用户点击Fiction时会返回如下:
<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');
},
});
但它没有用。如果有人纠正我的错误会很高兴
谢谢..
答案 0 :(得分:0)
我看到很多错误,所以这里有一个简单的工作示例,你可以看到你犯错的地方
模板调用辅助函数并为其赋予参数,在这种情况下,我们要检查的选项卡是否处于活动状态。
<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