Шаблон jsRender для таблицы, содержащей элементы переменной длины

У меня есть простая модель представления с традиционным отношением «один ко многим»: у клиентов есть заказы.
Я создаю таблицу, в которой каждая строка имеет имя клиента, а за ним следует строка заказов. Все работает отлично, но, к сожалению, у немногих клиентов одинаковое количество заказов, поэтому построение таблицы в конечном итоге выглядит как гистограмма.

Я знаю, что для этого есть стандартное решение, но я не могу понять это. Я хочу, чтобы каждая строка содержала одинаковое количество ячеек. Я рассматривал возможность добавления фиктивных данных в свою модель, но это плохо пахнет. Я могу получить максимально возможное количество заказов, но я не могу понять, как разработать шаблон, который может использовать любую эту информацию для создания унифицированных таблиц. Вот что у меня есть до сих пор:

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

Это рендеринг «Order.0 имеет значение null или не является объектом». Я проверил, что в каждой строке есть данные, но шаблон считает, что это не так. Я предполагаю, что это как-то связано с тем фактом, что я ищу элементы массива, но я не уверен, как получить доступ к элементам по индексу таким образом, который примет jsRender.


javascript templates asp.net-mvc-4 jsrender
person Stephen Collins    schedule 18.01.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это может не квалифицироваться как ответ, но слишком длинно для комментария.

Я не на 100% следую тому, что вы хотите. Я предполагаю, что если у вас есть 5 клиентов, и у одного клиента есть 10 заказов, а у 4 других клиентов есть 7 заказов, то вам нужны 3 пустых тега td для остальных 4 клиентов.

Первое, что вам нужно знать, это длина самого длинного списка заказов. Допустим, это 10. Затем вам нужно передать это в шаблон OrderRow. Собственно, вам нужна разница между максимальным и количеством заказов текущего клиента. Назовем эту дельту.

Теперь, после цикла {{for Orders}}, у вас есть два варианта. Вы можете либо добавить один td с диапазоном дельты, либо добавить дельта-число пустых тегов td. Вы хотите сделать любое из этих дополнений, только если дельта больше 0. Предполагая, что ~ max передается как максимальное количество заказов, чем что-то вроде:

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

Что меня смущает, так это то, что конечный результат будет выглядеть одинаково. Заказы по-прежнему будут отображаться в виде боковой гистограммы в левой части таблицы.

Вы упомянули «стандартное решение для этого». Можете ли вы указать где-нибудь отрендеренный пример?

person pedz    schedule 19.01.2013