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

【问题标题】：jsRender template for table containing variable-length elements包含可变长度元素的表格的 jsRender 模板
【发布时间】：2013-01-18 23:05:13
【问题描述】：

我有一个简单的视图模型，它具有传统的一对多关系：客户有订单。
我正在创建一个表格，每行都有一个客户名称，后面有一行订单。这一切都很好，但不幸的是，很少有客户拥有相同数量的订单，因此构建表格最终看起来像一个横向条形图。

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

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

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

    // 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 接受的方式通过索引访问元素。

【问题讨论】：

标签： javascript templates asp.net-mvc-4 jsrender

【解决方案1】：

这可能不符合作为答案的条件，但它作为评论太长了。

我不会 100% 遵循你想要的。我猜如果您有 5 个客户，一个客户有 10 个订单，另外 4 个客户有 7 个订单，那么您需要 3 个空 td 标签用于其他 4 个客户。

您需要知道的第一件事是最长订单列表的长度。假设它是 10。然后您需要将其传递到 OrderRow 模板中。实际上，您需要当前客户的最大订单数和订单数之间的差异。让我们称之为增量。

现在，在 {{for Orders}} 循环之后，您有两个选择。您可以添加一个跨度为 delta 的 td，也可以添加 delta 数量的空 td 标签。只有当 delta 大于 0 时，您才需要执行这些添加中的任何一个。假设 ~max 作为最大订单数传入，而不是类似：

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

我感到困惑的是，最终结果看起来是一样的。它仍然会在表格左侧以横向条形图的形式显示订单。

您提到了“对此的标准解决方案”。你能在某处指出一个渲染的例子吗？

【讨论】：