Question

我有一个ko.observable，其中我持有一个结构为的json对象：

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

我如何使用来自淘汰赛的foreach迭代这个？

直到现在，我已经设法迭代了键（“abc”，“zdc”），但我不知道如何使用键从observable中获取值。

这是我的代码

 <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]，看看：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

除了最简单的数据操作外，最好在viewmodel中完成，以防止视图变得复杂和混乱。一个小辅助函数可以处理将可观察对象转换为适合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>

迭代json对象

2 个答案: