0

私は、従来の1対多の関係を持つ単純なビューモデルを持っています。顧客には注文があります。
各行に顧客名があり、その後に注文の行が続くようなテーブルを作成しています。すべてうまく機能していますが、残念ながら同じ注文数の顧客はほとんどいないため、テーブルを作成すると横棒グラフのように見えます。

これには標準的な解決策があることは知っていますが、私は一生それを理解することができません。私が目指しているのは、すべての行に同じ量のセルを含めることです。モデルにダミーデータを入れることを検討しましたが、それは悪臭がします。可能な限り多くの注文を受け取ることはできますが、その情報を使用して統一されたテーブルを作成できるテンプレートを設計する方法がわからないようです。これが私がこれまでに持っているものです：

//#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がnullであるか、オブジェクトではない」とレンダリングされます。すべての行にデータが含まれていることを確認しましたが、テンプレートにはデータが含まれていないと見なされます。これは、配列要素を探しているという事実と関係があると思いますが、jsRenderが受け入れる方法でインデックスによって要素にアクセスする方法がわかりません。

4

1 に答える 1

0

これは回答とは言えないかもしれませんが、コメントとしては長すぎます。

私はあなたが望むものに 100% 従うことはありません。5 人の顧客がいて、1 人の顧客に 10 件の注文があり、他の 4 人の顧客に 7 件の注文がある場合、他の 4 人の顧客ごとに 3 つの空の td タグが必要になると思います。

最初に知っておく必要があるのは、最長オーダー リストの長さです。10 としましょう。それを OrderRow テンプレートに渡す必要があります。実際には、現在の顧客の最大注文数と注文数の差が必要です。それをデルタと呼びましょう。

{{for Orders}} ループの後、2 つの選択肢があります。デルタのスパンを持つ単一の td を追加するか、空の td タグのデルタ番号を追加できます。delta が 0 より大きい場合にのみ、これらの追加のいずれかを実行する必要があります。 ~max が注文の最大数として次のようなものよりも渡されると仮定します。

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

私が混乱しているのは、最終結果が同じように見えることです。テーブルの左側に横向きの棒グラフとして注文が表示されます。

「これに対する標準的な解決策」について言及しました。レンダリングされた例をどこかに指摘できますか?

于 2013-01-19T21:31:02.277 に答える