充分利用JSON陣列中的所有鍵在knockout.js

Question

我使用knockout.js首次和有一個數組如下：

function AppViewModel() { 
    var self = this; 

    self.calls = ko.observableArray([ 
     { description: 'Create a new project', url: '/feeds/create', method: 'Get', params: [{ success: "true", token: "123adfds1" }] }, 
     { description: 'Get info', url: '/feeds/info', method: 'Get', params: [{ success: "true", token: "123adfds1" }] }, 
    ]); 
} 
ko.applyBindings(new AppViewModel()); 

，我還可以使用foreach語句，這樣讓他們：

<tbody> 
<!-- ko foreach: { data: calls, as: 'call' } --> 
    <tr> 
     <td><span data-bind="text: description"></span></td> 
     <td><span data-bind="text: url"></span></td> 
     <td><span data-bind="text: method"></span></td> 
     <!-- ko foreach: params --> 
     <td> 
      <span class="params" data-bind="text: $data"></span>        
     </td> 
     <!-- /ko --> 
     <td class="last"><a href="" class="btn btn-mini">Edit</a></td> 
    </tr> 
<!-- /ko --> 
</tbody> 

我唯一的問題是，我並不總是知道「PARAMS」陣列中的所有元素的名稱，因此，我想列出所有元素。

我該如何做到這一點？

謝謝

Answer 1

它讓圖片有點混淆，你的「參數」不僅僅是一個具有不可預見數量屬性的對象，而且顯然是每個對象具有不可預見數量的屬性的對象數組。然而，一個解決方案可能是一個新的「計算機」屬性添加到您的視圖模型項如下：

function AppViewModel() { 
    var self = this; 

    self.calls = ko.observableArray([ 
     { description: 'Create a new project', url: '/feeds/create', method: 'Get', params: [{ success: "true", token: "123adfds1" }] }, 
     { description: 'Get info', url: '/feeds/info', method: 'Get', params: [{ success: "true", token: "123adfds1" }] }, 
    ]); 

    ko.utils.arrayForEach(self.calls(), function(elem) { 
     elem.parameterNames = ko.computed(function() { 
      var keys = []; 
      ko.utils.arrayForEach(elem.params, function (paramEntry) { 
       for (var key in paramEntry) 
        keys.push({ key: key, value: paramEntry[key] }); 

      }); 

      return keys; 
     }); 
    }); 
} 

這種變平的結構，其意料之外的屬性名稱爲標準化的「鍵」 /「值」的集合實體。然後你的Knockout綁定可能看起來像這樣（注意最上面的綁定是針對新的計算屬性「parameterNames」而不是針對「params」）。

<!-- ko foreach: parameterNames --> 
    <td> 
     <span class="params" data-bind="text: key"></span> - <span class="params" data-bind="text: value"></span>      
    </td> 

這有幫助嗎？

Answer 2

我認爲淘汰賽只會對數組進行foreach。你可以試試這個：

<td data-bind="foreach: { data: Object.keys(params) }"> 
    <span data-bind="text: params[$data]"></span> 
</td> 

注意Object.keys只適用於現代瀏覽器。