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

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

我知道这有一个标准的解决方案，但我一辈子都想不出来。我要做的是让每一行包含相同数量的单元格。我曾考虑过在我的模型中加入虚拟数据，但这听起来很糟糕。我可以获得尽可能多的订单，但我似乎不知道如何设计一个可以使用这些信息创建统一表的模板。以下是我目前掌握的情况：

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

/#数据是我的ViewModel，包含一些其他内容
{{对于#data.Customers tmpl='tmplRow'/}}

//OrderRow.tmpl.html
{{如果#索引%2==0}
{{else}
{{/if}
{{>Name}
{{订单}}
{{>OrderId}
{{/for}}

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

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

//OrderRow.tmpl.html
{{如果#索引%2==0}
{{else}
{{/if}
{{>Name}
{>顺序[0].Id}
{>顺序[1].Id}

---

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

这可能不符合答案，但作为注释太长

我不是百分之百地按照你的要求去做。我猜，如果你有5个客户，其中一个客户有10个订单，而另外4个客户有7个订单，那么你需要为其他4个客户分别设置3个空td标签

您首先需要知道的是最长订单列表的长度。假设是10点。然后需要将其传递到OrderRow模板中。实际上，您需要当前客户的最大订单数和订单数之间的差值。我们称之为三角洲

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

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

{{if（~max-Orders.lengh）>0}
{{/if}

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

你提到“这是一个标准的解决方案”。你能指出某个地方的渲染示例吗

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