以Knockout顯示行作爲列

Question

我以下面的格式顯示了視圖模型，並且需要以低於格式呈現數據。你能幫我做一些有約束力的工作來渲染低於表格的格式嗎？

var data = {"MonthlySummaries": 
    [ 
    {"Name": "Jan", "BeginBalance": "1000", "Usage": "100", "EndBalance": "900"} 
    ,{"Name": "FEB", "BeginBalance": "900", "Usage": "100", "EndBalance": "800"} 
    ,{"Name": "MAR", "BeginBalance": "800", "Usage": "100", "EndBalance": "700"} 
    ] 
}; 

這是表應該是什麼樣子：

    JAN  FEB  MAR 
BeginBalance  1000 900  800 
Usage    100 100  100 
EndBalance  900 800  700 

Answer 1

你確實應該嘗試the tutorials，關係到你的問題之一是the second one我會說。或者只是潛入the observableArray documentation和the foreach documentation。

最難的部分是您的源數據的格式不符合HTML格式。在HTML中沒有「矩陣」的概念，與行相比，構建「列」並不容易。您需要調換您的數據以使其簡單易用。

轉置數據有很多種方法。最容易的是接近您的數據生成點（例如在您的服務器端控制器）。如果無法獲得該代碼，這裏是一個使用「啞巴」轉客戶端小，簡單的例子：

var data = {"MonthlySummaries": 
 
[ 
 
{"Name": "Jan", "BeginBalance": "1000", "Usage": "100", "EndBalance": "900"} 
 
,{"Name": "FEB", "BeginBalance": "900", "Usage": "100", "EndBalance": "800"} 
 
,{"Name": "MAR", "BeginBalance": "800", "Usage": "100", "EndBalance": "700"} 
 
] 
 
}; 
 

 
var transposedData = { 
 
    Headers: ["Jan", "FEB", "MAR"], 
 
    Rows: [ 
 
     { 
 
      Name: "BeginBalance", 
 
      Values: [ 
 
       data["MonthlySummaries"][0].BeginBalance, 
 
       data["MonthlySummaries"][5].BeginBalance, 
 
       data["MonthlySummaries"][6].BeginBalance 
 
      ] 
 
     }, 
 
     { 
 
      Name: "Usage", 
 
      Values: [ 
 
       data["MonthlySummaries"][0].Usage, 
 
       data["MonthlySummaries"][7].Usage, 
 
       data["MonthlySummaries"][8].Usage 
 
      ] 
 
     }, 
 
     { 
 
      Name: "EndBalance", 
 
      Values: [ 
 
       data["MonthlySummaries"][0].EndBalance, 
 
       data["MonthlySummaries"][9].EndBalance, 
 
       data["MonthlySummaries"][10].EndBalance 
 
      ] 
 
     } 
 
    ] 
 
}; 
 

 
ko.applyBindings(transposedData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<table> 
 
    <tr> 
 
    <td></td> 
 
    <!-- ko foreach: Headers --> 
 
    <td data-bind="text: $data"></td> 
 
    <!-- /ko --> 
 
    </tr> 
 
    <tbody data-bind="foreach: Rows"> 
 
    <tr> 
 
     <td data-bind="text: Name"></td> 
 
     <!-- ko foreach: Values --> 
 
     <td data-bind="text: $data"></td> 
 
     <!-- /ko --> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

這是真的存在於HTML做基於列的表沒有內置機制這真的很糟糕。轉置數據並不總是一種選擇。最近我在這個問題上遇到了很大的困難，終於找到了一個解決方法，它似乎使用CSS flexbox發揮出色。

<div class="container"> 
    <div class="column"> 
     <div class="cell">Label</div> 
     <div class="cell">Begin Balance</div> 
     <div class="cell">Usage</div> 
     <div class="cell">End Balance</div> 
    </div> 
    <!-- ko foreach:MonthlySummaries --> 
    <div class="column"> 
     <div class="cell" data-bind="text:Name"></div> 
     <div class="cell" data-bind="text:BeginBalance"></div> 
     <div class="cell" data-bind="text:Usage"></div> 
     <div class="cell" data-bind="text:EndBalance"></div> 
    </div> 
    <!-- /ko --> 
</div> 

樣式表

.container { 
    display:flex; 
    flex-direction:row; 
} 
.column { 
    display:flex; 
    flex-direction:column; 
} 
.cell { 
    margin:.2em; 
} 

下面是使用你的數據工作jsfiddle。您可以爲單元類添加邊框，並使用填充而不是邊距來使其看起來像表格。