knockout.js
ノックアウトforeachのJSONバインディングの使用

ネストされたループの操作

ここではJSON構造体を使用します。

{
  "employees": [
    {
      "firstName": "John",
      "lastName": "Doe",
      "skills": [
        {
          "name": "javascript",
          "rating": 5
        }
      ]
    },
    {
      "firstName": "Anna",
      "lastName": "Smith",
      "skills": [
        {
          "name": "css",
          "rating": 5
        },
        {
          "name": "javascript",
          "rating": 5
        }
      ]
    },
    {
      "firstName": "Peter",
      "lastName": "Jones",
      "skills": [
        {
          "name": "html",
          "rating": 5
        },
        {
          "name": "javascript",
          "rating": 3
        }
      ]
    }
  ]
};

このjson構造体は変数に代入することも、任意のapiの応答とすることもできます。

このJSONでわかるように、外部ノードには従業員の情報を保持する従業員があり、従業員のスキルを示す内部ノードがあります。

ここではknockout foreachを使ってネストしたものを作成します。ここにhtmlがあります

<ul id="employee" data-bind="foreach: employee">
   <li data-bind="text:firstName + ' ' + lastName">
   </li>
   <ul data-bind="foreach : skills">
        <li data-bind="text: name">
        </li>
      <ul>
        <li>
          Rating : <!-- ko text: rating --><!-- /ko -->
        </li>
      </ul>
   </ul>
</ul>

ここで上記のhtmlにはforeachループを保持する2つのリストがあります。外部ループは従業員であるJSON構造の外部ノードを保持します。インナーループは、各従業員のスキルを保持します。各ループの内部で、対応するノードのプロパティにアクセスできます。たとえば、外部からではなく、スキルループ内で名前と評価にアクセスすることができます。

以下はjavascriptコードです。

var employeeViewModel = function(){
  var self = this;
  self.employee = ko.observableArray(employees);//here we can assign json
}
var viewModel = new employeeViewModel();
ko.applyBindings(viewModel);

フォームのjavascriptのポイントはあまりないコードです。私たちはjsonをHtmlで使用されるobservablearrayに直接割り当てることができます。