jquery - 在表中显示动态 knockout 可观察数组

Question

给定一个在 viewModel 中定义的可观察数组“sampleList”。

 [
   { 
     name: abc, 
     age:  40,
     InterestLevel: {
        trekking: 50,
        hiking : 43
     }  
   },

  { 
     name: def, 
     age:  34,
     InterestLevel: {
       cricket: 55,
       cycling: 75
     }  
   }
 ]

如何使用 KO 自定义绑定(bind)或任何最佳可能的方式从上述数据生成下表。

-------------------------------------

name  age  Interest  InterestLevel
-------------------------------------

abc   40    trekking    50
abc   40    hiking      43
def   34    cricket     55
def   34    cycling     75

[请注意，InterestLevel 内的键是动态的]。

Answer 1

首先，您必须对数据进行非标准化:

this.TableData = ko.computed(function()
    {
    var data = ko.unwrap(this.sampleList)
    var res = ko.observableArray();

    for (var i in data)
    {
        for (var il in data[i].InterestLevel)
        {
            var ild = data[i].InterestLevel[il];
            res.push({ name: data[i].name, age: data[i].age, Interest: il, InterestLevel: ild });
        }
    }

    return res;
}, this);

然后将您的表绑定(bind)到TableData():

<table>
    <thead>
        <tr>
             <td>Name</td>
             <td>Age</td>
             <td>Interest</td>
             <td>Interest Level</td>
        </tr>
    </thead>

    <tbody data-bind="foreach: TableData()">
        <tr>
             <td data-bind="text: name">Name</td>
             <td data-bind="text: age">Age</td>
             <td data-bind="text: Interest">Interest</td>
             <td data-bind="text: InterestLevel">Interest Level</td>                
        </tr>
    </tbody>
</table>

参见Fiddle