2014-09-30 160 views
0

基本上我有我的“主页” - 模板,它显示两个相同的表格与不同的内容。 Home-Template上的表格仅显示每个表格的最新五个“订单”。 单击表格标题(模板“showLatestOrders”中的h2),我想要路由到他们自己的模板,其中显示完整列表。创建动态模板和路径

我知道我可以只是许多不同的模板。但是这看起来非常难看。

我正在使用铁:路由器,我不知道如何使我的模板“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({}); 
}; 
+0

你要确定当前的网址是什么? – yoK0 2014-10-01 06:28:08

+0

不,我想要路由到我的“orderOverview”模板动态。所以我可以将它用于多个数据上下文。 为此我需要插入像我的铁路由器链路中的变量: {{this.heading}} 但我只是得到“/orderOverview?view=this.heading”和this.heading没有解决。 – peggel 2014-10-01 06:41:24

+0

this.heading来自之前的空格键调用: {{> showLatestOrders heading =“Open Orders”data = getLatestOpenOrders}} – peggel 2014-10-01 06:44:26

回答

0

pathFor可以采取的路由参数。我会做的是通过标题信息作为路由参数,并将其保持在一个会话变量的佣工被访问:

在模板:

<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')}); 
};