0

我有一个看起来像这样的视图模型。

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

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

我必须打印出每个地区，然后是他们的收入和利润。

我怎么做？遍历区域并为每个区域执行 Sales.[Region]Revenue 和 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>

谢谢。

4

1 回答 1

2

您的数据设置非常奇怪，因此如果您可以更改它，我建议您使用 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 中，您可以使用[]语法按名称访问属性，因此您可以使用简单的字符串 concat 在绑定中生成属性名称：

<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。

于 2013-02-20T19:29:51.813 回答