包含可變長度元素的表格的jsRender模板

我有一個簡單的具有傳統一對多關係的視圖模型：客戶有訂單。
我創建了一個表格，每行都有一個客戶名稱和一行訂單。這一切都很好，但不幸的是很少有客戶有相同數量的訂單，所以建立表格最終看起來像是一個橫向條形圖。包含可變長度元素的表格的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>

編輯：所以我決定只強制列numbe，但現在我得到我的新一些奇怪的行爲模板：

// 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將接受的方式按索引訪問元素。

來源

2013-01-18 Stephen Collins

這可能沒有資格作爲答案，但它的評論太長。

我不完全按照你想要的。我猜測如果你有5個客戶，一個客戶有10個訂單，另外4個客戶有7個訂單，那麼你需要爲其他4個客戶分別提供3個空的td標籤。

您需要知道的第一件事是最長訂單列表的長度。讓我們說它的10.然後你需要將它傳遞給OrderRow模板。實際上，您需要當前客戶的最大數量和訂單數量之間的差異。讓我們打電話給三角洲。

現在，在{{forders}}循環之後，您有兩個選擇。您可以添加一個帶有跨度delta的單個td，也可以添加空白td標籤的delta數量。你想要做的這兩種添加劑的只有增量大於0假設〜最大傳遞作爲訂單的最大數量比是這樣的：

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

我感到困惑的是最終的結果是看起來一樣。它仍然將訂單作爲表格左側的橫向條形圖。

您提到了「對此的標準解決方案」。你可以指向某個地方的渲染示例嗎？

來源

2013-01-19 21:31:02 pedz

包含可變長度元素的表格的jsRender模板

回答

相關問題