敲除 - 訪問變量屬性

Question

我有一個看起來像這樣的viewmodel。

function ViewModel() 
{ 
    this.Regions = ['Europe', 'AsiaPac', 'Americas']; 

this.Sales = { 
    EuropeRevenue: 100, 
    EuropeProfit: 100, 
    AsiaPacRevenue: 200, 
    AsiaPacProfit: 100, 
    AmericasRevenue: 300, 
    AmericasProfit: 250 
}; 
} 

我必須打印出每個區域，然後是他們的收入和利潤。

我該怎麼做？循環遍歷地區，併爲每個地區做銷售。[Region] Revenue and Sales。[Region] Profit。

<div data-bind="foreach: Regions }"> 
     Region:<span data-bind="text: $data"></span> 
     Revenue:<span data-bind="text: $root.Sales.$dataRevenue???"></span> 
     Profit:<span data-bind="text: $root.Sales.$dataProfit???"></span> 
    </div> 

謝謝。

Answer 1

你的數據的設置是很奇怪的，所以如果你可以改變它，我建議用一個RegionSales集合模擬這種......

this.RegionSalesData = 
     [ 
      { Name: 'Europe', Revenue: 100, Profit: 100}, 
      { Name: 'AsiaPac',Revenue: 200, Profit: 100}, 
      { Name: 'Americas', Revenue: 300, Profit: 250}]; 

然後你就可以在綁定Name，Revenue，Profit使用屬性。

但是，爲了回答您的實際問題：在JavaScript中，你可以通過名稱與[]語法訪問屬性，所以你可以用一個簡單的字符串連接的結合產生的屬性名稱：

<div data-bind="foreach: Regions "> 
    <div> 
     Region:<span data-bind="text: $data"></span> 
     Revenue:<span data-bind="text: $root.Sales[$data+'Revenue']"></span> 
     Profit:<span data-bind="text: $root.Sales[$data+'Profit']"></span> 
    </div> 
</div> 

演示JSFiddle。