循环对象属性

Question

我正在编写一个测试程序来从Rotten Tomatoes API 中提取数据，并且想知道在使用映射插件后循环遍历对象属性的最佳方法。数据非常简单，通过 jquery ajax 检索。

这里是一小部分数据：

"ratings": {
  "critics_rating": "Certified Fresh",
  "critics_score": 99,
  "audience_rating": "Upright",
  "audience_score": 91
 }

这是更大映射的一部分，我正在 ajax 回调中执行这样的映射：

self.moviedetail = ko.mapping.fromJS(data);

我意识到我可以做以下我正在尝试优化的事情：

<div data-bind-"with: moviedetail">
 <ul data-bind="with: ratings">
  <li>Critics Rating: <span data-bind="text: critics_rating"></span></li>
  <li>Critics Score: <span>data-bind="critics_score"</span></li>
   etc
 </ul>
</div>

我还没有确定如何循环每个评级，以某种与数据无关的方式显示它们，而无需检查每个评级。使用下划线我可以遍历属性并获取它们的值，但不知道如何在淘汰赛中实现相同的目标。

我正在寻找的最终结果是这样的：

<ul>
  <li>critics_rating: Certified Fresh</li>
  <li>critics_score: 99</li>
  ....
</ul>

注意：根据肯定有效的答案之一，我可以像这样预处理数据，但是我正在寻找是否有办法在视图上执行此操作。

if (data.ratings!=='undefined') {
  self.ratings.removeAll();
  for(var prop in data.ratings) {
    if(data.ratings.hasOwnProperty(prop)) {
        self.ratings.push({name: prop, value: data.ratings[prop]});                         
    }
  }
}

Answer 1

我认为默认情况下你不能通过淘汰赛做到这一点。

您可以处理数据数组以将传入的数据放入可以以通用方式绑定的结构中，例如：

"ratings" : {
    [ "name": "critics_rating", "value": "Certified Fresh" ],
    [ "name": "critics_score", "value": 99 ],
    ...
}

然后像 HTML 一样使用

<ul data-bind="foreach: ratings">
    <li>
        <span data-bind="text: name"></span>:
        <span data-bind="text: value"></span>
    </li>
</ul>