创建动态模板和 pathFor答案

【问题标题】：Create Dynamic Templates and pathFor创建动态模板和 pathFor
【发布时间】：2014-11-25 01:20:48
【问题描述】：

基本上，我有我的“主页”模板，它显示了两个具有不同内容的相同表格。 Home-Template 上的表格仅显示每张表格的最新五个“订单”。通过单击表头（模板“showLatestOrders”中的 h2），我想路由到显示完整列表的自己的模板。

我知道我可以使用许多不同的模板。但这看起来很丑陋。

我正在使用 Iron:router，我想知道如何在我的模板“showLatestOrders”中使这个“pathFor”动态化，所以我只需要一个模板用于我的所有概览表。

模板：

<template name="home">
  <div class="container">
    <h1>Home</h1>
    <div>
      {{> showLatestOrders heading="Closed Orders" data=getLatestClosedOrders}}
    </div>
    <div>
      {{> showLatestOrders heading="Open Orders" data=getLatestOpenOrders}}
    </div>
  </div>
</template>

<template name="showLatestOrders">
  <h2><a href="{{pathFor 'orderOverview'}}">{{this.heading}}</a> 
  </h2>
  <div>
    <table >
      <thead>
        <tr>
          <th>Number</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        {{#each data}}
          <tr>
            <td>{{number}}</td>
            <td>{{price}}</td>
          </tr>
        {{/each}}
      </tbody>
    </table>
  </div>
</template>

<template name="orderOverview">
  <div class="container">
      <h1>How to get a dynamic heading and collection here, based on where the route comes from?</h1>
        {{> reactiveTable collection=getOrders }}
  </div>
</template>

助手：

Template.home.getLatestOpenOrders = function () {
    var data = Orders.find({
        // get just open orders
    }, {
        limit: 5
    });
    return data;
}

Template.home.getLatestCompletedOrders = function () {
    var data = Orders.find({
        // get just completed orders
    }, {
        limit: 5
    });
    return data;
}

Template.orderOverview.getOrders = function() {
  return Orders.find({});
};

【问题讨论】：

你想确定当前的网址吗？
不，我想路由到我的“orderOverview”模板动态。所以我可以将它用于多个数据上下文。因此，我需要在我的铁路由器链接中插入一个变量，例如： {{this.heading}} 但是然后我只得到“/orderOverview?view=this.heading”，this.heading 没有解决。
this.heading 来自之前的空格键调用：{{> showLatestOrders heading="Open Orders" data=getLatestOpenOrders}}

标签： meteor iron-router spacebars

【解决方案1】：

pathFor 可以为路由带参数。我要做的是将标题信息作为路线的参数传递，并将其保存在 Session 变量中，以便在帮助程序中访问：

在模板中：

<a href="{{pathFor 'orderOverview' heading=this.heading}}">{{this.heading}}</a>

在路线中：

Router.map(function () {
    // your routes etc.
    this.route('orderOverview', {
        path: '/orderOverview/:heading',
        onBeforeAction: function () {
            Session.set('heading', this.params.heading);
        }
    });
});

在助手中：

Template.orderOverview.getOrders = function() {
    return Orders.find({"heading": Session.get('heading')});
};

【讨论】：