1

Rotten Tomatoes APIからデータをプルするテストプログラムを作成していますが、マッピングプラグインを使用した後、オブジェクトのプロパティをループするための最良のアプローチを知りたいと思います。データは非常に単純で、jqueryajaxを介して取得されています。

データのごく一部を次に示します。

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

注：間違いなく機能する回答の1つとして、このようにデータを前処理できますが、ビューでそれを行う方法があるかどうかを確認しています。

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]});                         
    }
  }
}
4

1 に答える 1

3

デフォルトではノックアウトでこれを行うことはできないと思います。

データ配列を処理して、次のような一般的な方法でバインドできる構造に受信データを配置できます。

"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>
于 2012-10-12T22:58:21.700 に答える