流星+铁路由器创建面包屑

Question

好的，所以我找到了这篇文章：流星面包屑

但是可以说我有以下几点：

<template name="somePage">
    <h1>Page Title</h1>
    {{> breadcrumb}}
</template>

<template name="breadcrumb">
    <ul class="breadcrumb">
        <li>
            <a href="{{pathFor 'homeTemplate'}}">Home</a>
        </li>
        {{#each path}}
        <li>
            <a href="needthepath">{{this}}</a>
        </li>
    </ul>
</template>

Helper:

Template.breadcrumb.helpers({
    path: function() {
        return Router.current().path.split( "/" );
    }
});

好的，所以顶部的链接问题为我提供了基础知识。我正在尝试了解如何在此处做一些显而易见的事情。我想要第一个

表示首页，并且从以下路径返回的结果：function（）在其开头包含空的“”，“ page”，“ page”等。

我希望能够包含适当的路径。明确地说，我很乐意做到这一点：

<template name="breadcrumb">
    <ul class="breadcrumb">
        <li>
            <a href="{{pathFor 'homeTemplate'}}">Home</a>
        </li>
        ~ pseudo logic
        {{#each path that isn't current page}}
        <li>
            <a href="{{dynamicPath}}">{{this}}</a>
        </li>
        {{/each}}
        <li>
            {{ currentPage }}
        </li>
    </ul>
</template>

有没有人做过此事或找到了我还没有偶然发现的参考？

Answer 1

我会给您自己的面包屑食谱iron:router。

它通过为您的路线提供其他选项来工作，从而在它们之间建立具有父子关系的层次结构。然后，我们在路由器上定义一个帮助程序，以为我们提供当前路由的父路由列表（到本地）。当您具有此路由名称列表时，可以遍历它们以创建面包屑。

首先，我们需要定义面包屑模板，该模板实际上与您的伪代码非常相似。我正在使用bootstrap和font-awesome以及一些新引入的iron:router@1.0.0-pre功能。

<template name="breadcrumbs">
    <ol class="breadcrumb">
        <li>
            {{#linkTo route="home"}}
                <i class="fa fa-lg fa-fw fa-home"></i>
            {{/linkTo}}
        </li>
        {{#each intermediateRoutes}}
            <li>
                {{#linkTo route=name}}
                    <strong>{{label}}</strong>
                {{/linkTo}}
            </li>
        {{/each}}
        <li class="active">
            <strong>{{currentRouteLabel}}</strong>
        </li>
    </ol>
</template>

该{{#linkTo}}块是辅助在新iron:router@1.0.0-pre，它仅仅输出具有href属性哪个值的锚标签{{pathFor "route"}}。

让我们从面包屑模板中定义助手：

Template.breadcrumbs.helpers({
    intermediateRoutes: function() {
        if (!Router.current()) {
            return;
        }
        // get rid of both the first item, which is always assumed to be "home",
        // and the last item which we won't display as a link
        var routes = Router.parentRoutes().slice(1, -1);
        return _.map(routes, function(route) {
            // extract name and label properties from the route
            return {
                name: route.getName(),
                label: route.options.label
            };
        });
    },
    currentRouteLabel: function() {
        // return the label property from the current route options
        return Router.current() && Router.current().route.options.label;
    }
});

请注意，我们依赖于名为“ label”的特殊选项的存在，该选项代表我们将要放置到锚中的内容，我们也可以使用该名称进行测试。

该parentRoutes方法是我们需要扩展的Router：

_.extend(Router, {
  parentRoutes: function() {
    if (!this.current()) {
      return;
    }
    var routes = [];
    for (var route = this.current().route; !_.isUndefined(route); route = this.routes[route.options.parent]) {
      routes.push(route);
    }
    return routes.reverse();
  }
});

再次，此函数假定每个路由（“ home”除外）都有一个父属性，该属性包含其父路由的名称，然后我们迭代从当前路径遍历该路由层次结构（像树一样，像是文件系统结构）路由到根路由，将每个中间路由与当前路由一起收集。

最后，别忘了使用我们的代码所依赖的两个附加属性来声明您的路由，以及一个名称，该名称现在是强制性的，因为在Router.routes属性中按名称对路由进行了索引：

Router.route("/", {
  name: "home"
});
Router.route("/nested1", {
  name: "nested1",
  parent: "home"
});
Router.route("/nested1/nested2", {
  name: "nested2",
  parent: "nested1"
});
// etc...

这个例子很基础，当然不会涵盖所有用例，但是应该为您实现面包屑的设计逻辑打下坚实的基础。