包含可变长度元素的表格的jsRender模板

我有一个简单的具有传统一对多关系的视图模型：客户有订单。
我创建了一个表格，每行都有一个客户名称和一行订单。这一切都很好，但不幸的是很少有客户有相同数量的订单，所以建立表格最终看起来像是一个横向条形图。包含可变长度元素的表格的jsRender模板

我知道有一个标准的解决方案，但我不能为我的生活弄明白。我要做的是让每一行都包含相同数量的单元格。我曾考虑过将虚拟数据放入我的模型中，但那味道很糟糕。我可以获得尽可能多的订单，但我似乎无法弄清楚如何设计可以使用任何信息创建统一表的模板。这是我到目前为止有：

//#data is my ViewModel containing a few other things 
<table id="ordersTable"> 
<!--header stuff--> 
<tbody> 
    {{for #data.Customers tmpl='tmplRow' /}} 
</tbody>

// OrderRow.tmpl.html 
{{if #index % 2 == 0}} 
<tr class="tableRowAlt1"> 
{{else}} 
<tr class="tableRowAlt2"> 
{{/if}} 
    <td>{{>Name}}</td> 
    <td></td> 
    {{for Orders }} 
    <td> 
     {{>OrderId}} 
    </td> 
    {{/for}} 
</tr>

编辑：所以我决定只强制列numbe，但现在我得到我的新一些奇怪的行为模板：

// OrderRow.tmpl.html 
{{if #index % 2 == 0}} 
<tr class="tableRowAlt1"> 
{{else}} 
<tr class="tableRowAlt2"> 
{{/if}} 
    <td>{{>Name}}</td> 
    <td> 
     {{>Order[0].Id}} 
    </td> 
    <td> 
     {{>Order[1].Id}} 
    </td> 
    <!--...--> 
</tr>

它呈现“Order.0为空或不是对象。”我已验证每行都有数据，但模板认为它没有。我想这与我正在寻找数组元素的事实有关，但我不确定如何通过jsRender将接受的方式按索引访问元素。

来源

2013-01-18 Stephen Collins

这可能没有资格作为答案，但它的评论太长。

我不完全按照你想要的。我猜测如果你有5个客户，一个客户有10个订单，另外4个客户有7个订单，那么你需要为其他4个客户分别提供3个空的td标签。

您需要知道的第一件事是最长订单列表的长度。让我们说它的10.然后你需要将它传递给OrderRow模板。实际上，您需要当前客户的最大数量和订单数量之间的差异。让我们打电话给三角洲。

现在，在{{forders}}循环之后，您有两个选择。您可以添加一个带有跨度delta的单个td，也可以添加空白td标签的delta数量。你想要做的这两种添加剂的只有增量大于0假设〜最大传递作为订单的最大数量比是这样的：

{{if (~max - Orders.lengh) > 0 }} 
    <td colspan='{{ ~max - Orders.length }}'></td> 
{{/if}}

我感到困惑的是最终的结果是看起来一样。它仍然将订单作为表格左侧的横向条形图。

您提到了“对此的标准解决方案”。你可以指向某个地方的渲染示例吗？

来源

2013-01-19 21:31:02 pedz

包含可变长度元素的表格的jsRender模板

回答

相关问题