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

Question

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

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

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

我明白，编辑 Telescope 源文件不是明智之举，但这是最快、最简单的解决方案。现在，在大型 Telescope 重构之后，我想以正确的方式进行。

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

Answer 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";
}

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

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

Highlighting default view in Telescope app

telescope