0

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

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

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

4

1 回答 1

0

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

我不会 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}}

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

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

于 2013-01-19T21:31:02.277 回答