jsRender template for table containing variable-length elements

Question

I have a simple View Model that has the traditional one-to-many relationship: Customers have Orders.
I'm creating a table such that each line has a Customer name with a line of Orders following it. It's all working great, but unfortunately few Customers have the same amount of orders, so building the table ends up looking like a sideways bar chart.

I know there is a standard solution to this, but I can't for the life of me figure it out. What I'm going for is to have every row contain the same amount of cells. I've considered putting dummy data into my model, but that just smells bad. I can get the maximum amount of orders possible, but I can't seem to figure out how to design a template that can use any of that information to create uniform tables. Here's what I have so far:

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

EDIT: So I've decided to just force the numbe of columns, but now I'm getting some strange behavior on my new template:

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

It's rendering "Order.0 is null or not an object." I've verified that every row has data in it, but yet the template thinks it does not. I imagine this has something to do with the fact that I'm looking for array elements, but I'm not sure how to go about accessing the elements by index in a way that jsRender will accept.

pedz pedz · Accepted Answer · 2013-01-19T21:31:02

This may not qualify as an answer but its too long as a comment.

I don't 100% follow what you want. I'm guessing that if you have 5 customers and one customer has 10 orders and the 4 other customers have 7 orders, then you want 3 empty td tags for the other 4 customers each.

The first thing you need to know is the length of the longest order list. Lets say its 10. You then need to pass that into the OrderRow template. Actually, you need the difference between the max and the number of orders of the current customer. Lets call that delta.

Now, after the {{for Orders}} loop, you have two choices. You can either add a single td with a span of delta or you can add delta number of empty td tags. You want to do either of these additions only if delta is greater than 0. Assuming ~max is passed in as the maximum number of orders than something like:

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

What I'm confused about is the end result is going to look the same. It will still have the orders as a sideways bar chart on the left hand side of the table.

You mentioned "a standard solution to this". Can you point to a rendered example somewhere?

jsRender template for table containing variable-length elements

1 Answers