流星:如何用会话操作类

METEOR: How to manipulate class with session?

本文关键字：操作 会话 何用 流星      更新时间：2023-09-26

我正在学习流星会话

当用户单击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>

当用户点击虚构将返回如下:

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

Helper Helper将检查会话值是否等于你要检查的选项卡如果它等于它将返回'active'

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

相关文章：