Create Dynamic Templates and pathFor

Question

Basically I have my "Home"-Template which shows two identically tables with different content. The tables on the Home-Template are showing just the latest five "orders" per table. With a click on the table header(h2 in Template "showLatestOrders"), I want to route to their own Template where a complete list is shown.

I know I could just many different Templates. But this seems very ugly.

I'm using iron:router and I wonder how I can make this "pathFor" in my Template "showLatestOrders" dynamic, so I just need one Template for all my overview tables.

Templates:

<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>

Helpers:

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({});
};

No, I want to route to my "orderOverview" template dynamic. So I can use it for multiple data contexts. Therefor I need to insert a variable inside my iron router link like: {{this.heading}} But then I just get "/orderOverview?view=this.heading" and this.heading is not resolving. — peggel, Oct 01 '14 at 06:41
this.heading comes from the prior spacebars call: {{> showLatestOrders heading="Open Orders" data=getLatestOpenOrders}} — peggel, Oct 01 '14 at 06:44

score 0 · Answer 1 · answered Apr 29 '15 at 19:31

pathFor can take parameters for the route. What I would do is pass the heading information as a parameter for the route, and hold it in a Session variable to be accessed in the helpers:

In the template:

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

In the routes:

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

In the helpers:

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

Create Dynamic Templates and pathFor

1 Answers1