如何使以下模板助手具有反应性（Meteor）？

Question

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

<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

要使助手响应式，它必须依赖于响应式源。我们可以使用会话。

// 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 重新运行。

编辑：如果你想在页面加载或刷新时设置活动class，你可以这样做：

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

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

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

如何使以下模板助手具有反应性（Meteor）？

How to make the following template helper reactive (Meteor)?

javascript

meteor