Question

我有Chapters集合，我在其中一个模板中显示了一个章节列表：

<template name="chapterItem">
  <div class="chapter clearfix {{isCurrentChapter}}">
    <div class="chapter-arrows">
      <a class="move-up" href="javascript:;"><i class="ion-arrow-up-a"></i></a>
      <a class="move-down" href="javascript:;"><i class="ion-arrow-down-a"></i></a>
    </div>
    <h4><a class="open-chapter" href="javascript:;">{{title}}</a></h4>
    <a class="delete-current-chapter" href="javascript:;"><i class="ion-close-circled"></i></a>
  </div>
</template>

正如您所看到的，我创建了一个isCurrentChapter来像这样使用：

// book_page.js
Template.bookPage.events
  "click .open-chapter": function() {
    localStorage.setItem "currentChapter", this._id
  }

// chapter_item.js
Template.chapterItem.helpers({
  isCurrentChapter: function() {
    var currentChapterId = localStorage.getItem("currentChapter");
    var selectedChapterId = this._id;
    if selectedChapterId === currentChapterId) {
      return "active";
    }
  }
});

现在的问题是，active仅返回页面加载时的更改。

我怎样才能使isCurrentChapter成为被动的？在click .open-chapter事件中启动？

Answer 1

为使辅助反应，它必须依赖于反应源。我们可以使用Session。

// book_page.js
Template.bookPage.events({
  "click .open-chapter": function() {
    Session.set('currentChapter', this._id);
    localStorage.setItem("currentChapter", this._id);
  }
});

// chapter_item.js
Template.chapterItem.helpers({
  isCurrentChapter: function() {
    var currentChapterId = Session.get("currentChapter");
    var selectedChapterId = this._id;
    if (selectedChapterId === currentChapterId) {
      return "active";
    }
  }
});

当会话“currentChapter”发生变化时，帮助者isCurrentChapter重新运行。

编辑：如果您想在页面加载或刷新时设置活动类，可以执行以下操作：

var currentChapterId = Session.get("currentChapter") || localStorage.getItem("currentChapter");

尝试从会话中获取currentChapter，如果未定义，则从localStorage获取。或者在代码之上使用Session.setDefault：

Session.setDefault('currentChapter', localStorage.getItem('currentChapter'));

如何制作以下模板助手反应（Meteor）？

1 个答案: