Question

我有一个看起来像这样的viewmodel。

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

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

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

我该怎么做？循环遍历区域并为每个区域执行销售。[地区]收入和销售。[地区]利润。

    <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中，您可以使用[]语法按名称访问属性，这样您就可以使用简单的字符串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。

Knockout - 访问变量属性

1 个答案: