Question

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

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

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

Answer 1

这可能不符合答案，但其评论时间太长。

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

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

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

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

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

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

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

1 个答案: