Question

好的，所以我发现了这篇文章：Meteor breadcrumb

但我要说有以下内容：

<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（）包括一个空的＆＃34;＆＃34;，＆＃34; page＆＃34;，＆＃34;页面＆＃34;等开头。

我希望能够合并正确的路径。要清楚，我很乐意将其拉下来：

<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为您提供我自己的面包屑配方。

它的工作原理是为您的路线提供其他选项，以便在它们之间建立层次结构，并建立父子关系。然后我们在路由器上定义一个帮助器，为我们提供当前路由的父路由列表（直到主页）。当您拥有此路由名称列表时，您可以迭代它们以创建面包屑。

首先，我们需要定义我们的breadcrumbs模板，它实际上与你的伪代码非常相似。我使用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;
    }
});

请注意，我们依赖于名为＆＃39; label＆＃39;的特殊选项。这代表了我们将要放入锚点的内容，我们也可以将该名称用于测试目的。

我们需要使用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();
  }
});

同样，这个函数假定每个路由（除了＆＃34; home＆＃34;）都有一个包含其父路由名称的父属性，然后我们迭代遍历路由层次结构（想象一棵树，就像文件系统结构）从当前路由到根路由，收集数组中的每个中间路由以及当前路由。

最后，不要忘记使用我们的代码所依赖的两个附加属性来声明您的路由，以及现在必须使用的名称，因为路由在Router.routes属性中按名称编制索引：< / p>

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

这个例子非常基本，当然不能涵盖每个用例，但是应该为设计逻辑提供一个可靠的开始，以实现自己的面包屑。

Answer 2

受@saimeunt的启发，我创建了一个meteor breadcrumb插件，可在此处找到：https://atmospherejs.com/monbro/iron-router-breadcrumb。您还可以指定父路线和路线本身的标题。

Answer 3

我使用了saimeunt答案但是必须对模板和模板助手进行小的更改，因为我的一些路径路径中有参数。以下是我的更改。

模板更改：将data = getParameter添加到#linkTo以获取中间路径

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

模板帮助器更改：添加辅助函数getParameters以从当前路径获取参数。

Template.breadcrumbs.helpers({
    intermediateRoutes: function () {
        if (!Router.current()) {
            return;
        }
        var parentRoutes = Router.parentRoutes();
        var routes = parentRoutes.slice(1, -1);
        var intermediateRoutes = _.map(routes, function (route) {
            return {
                name: route.getName(),
                label: route.options.label
            };
        });
        return intermediateRoutes;
    },
    currentRouteLabel: function () {
        var currentRouteLabel = Router.current() && Router.current().route.options.label;
        return currentRouteLabel;
    },
    getParameters: function(){
        var currentRoute = Router.current();
        var parameters = currentRoute.params;
        return parameters;
    }
});

Meteor + Iron Router创建面包屑

3 个答案: