遍歷json對象

Question

我有一個ko.observable，其中我擁有一個具有以下結構的json對象：

{
"abc": {},
"zdc": {}
}

我如何使用淘汰賽中的foreach對此進行迭代？

到現在為止，我已經設法遍歷鍵（“ abc”，“ zdc”），但是我不知道如何使用鍵從可觀察對象中獲取值。

這是我的代碼

 <div data-bind="foreach: { data: Object.keys(copyProgStats2()), as: 'item' }">
                        <ul>
                            <li>
                                <span data-bind="text: item"></span>
                            </li>
                        </ul>
                    </div>

其中copyProgStats2是保存json obj的ko.observable。

在這種情況下，不要使用可觀察的數組，這一點很重要，因為這會使很多事情變得更加困難。

Answer 1

您可以這樣做： $parent.copyProgStats2()[item] ，看一下：

 function AppViewModel() { this.copyProgStats2 = ko.observable({ "abc": 'cool', "zdc": 'good enough' }); } ko.applyBindings(new AppViewModel()); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div data-bind="foreach: { data: Object.keys(copyProgStats2()), as: 'item' }"> <ul> <li> <span data-bind="text: $parent.copyProgStats2()[item]"></span> </li> </ul> </div> 

Answer 2

在視圖模型中最好對數據進行任何操作（最簡單的操作），以防止視圖變得復雜和混亂。 一個小的輔助功能可以處理將可觀察對象變成適合於foreach的數組。

我在對象上添加了延遲更改，因此您可以看到它會在視圖中更新。 我必須使用valueHasMutated因為我所做的更新不是可觀察到的。

 function AppViewModel() { this.copyProgStats2 = ko.observable({ "abc": 'cool', "zdc": 'good enough' }); this.toArray = function(observableObject) { var obj = observableObject(); return ko.utils.arrayMap(Object.keys(obj), function(key) { return obj[key]; }); }; } vm = new AppViewModel(); ko.applyBindings(vm); setTimeout(function() { vm.copyProgStats2().extra = 'new'; vm.copyProgStats2.valueHasMutated(); }, 1500); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div data-bind="foreach: toArray(copyProgStats2)"> <ul> <li> <span data-bind="text: $data"></span> </li> </ul> </div>