在 Telescope 应用程序中突出显示默认视图答案

【问题标题】：Highlighting default view in Telescope app在 Telescope 应用程序中突出显示默认视图
【发布时间】：2015-06-06 11:06:20
【问题描述】：

当您在管理设置中设置默认视图，并且您选中了多个视图以供用户切换时，默认视图不会突出显示为“活动”。

为了实现这一点，在以前版本的 Telescope（RefactorScope 之前）中，我修改了文件 client/components/menu/menu_component.js 添加了这个（我将 TOP 作为我的默认视图，所以我可耻地对其进行了硬编码）：

if (currentPath === "/" && getRoute(this) === "/top") {
  itemClass += " item-active"
}

我知道，编辑 Telescope 源文件不是明智之举，但它是最快、最简单的解决方案。现在，在望远镜大重构之后，我想以正确的方式去做。

但最终的问题是，正确的方法是什么？

【问题讨论】：

标签： telescope

【解决方案1】：

在对 Telescope 源码进行了一些挖掘之后，我得出了这个解决方案：

在您的自定义包中创建一个名为 custom_view_menu.js 的文件，其中包含以下内容：

getRoute = function (item) {
  // if route is a Function return its result, else apply Router.path() to it
  return typeof item.route == "function" ? item.route() : Router.path(item.route);
}

Template.menuItem.helpers({
  itemClass: function () {
    var itemClass = "";
    var currentPath = Router.current().location.get().path;

    if (this.adminOnly) {
      itemClass += " item-admin";
    }
    if (getRoute(this) === currentPath || getRoute(this) === Meteor.absoluteUrl() + currentPath.substr(1)) {
      // substr(1) is to avoid having two "/" in the URL
      itemClass += " item-active";
    }
    if (this.label === Settings.get("defaultView") && currentPath === "/") {
      itemClass += " item-active";
    }
    if (this.itemClass) {
      itemClass += " "+this.itemClass;
    }

    return itemClass;
  }
});

这是从原始来源 (https://github.com/TelescopeJS/Telescope/blob/master/packages/telescope-core/lib/client/templates/menu/menu_component.js) 复制的必需品，并添加了以下内容：

if (this.label === Settings.get("defaultView") && currentPath === "/") {
  itemClass += " item-active";
}

我希望它对某人有所帮助，而且我不是唯一一个尝试这样做的人:)

【讨论】：

很高兴您找到了方法。菜单组件在整个应用程序中重复用于多个菜单，因此我不想专门为视图菜单硬编码解决方案。