knockout.js
Lavorare con knockout foreach vincolanti con JSON

Lavorare con il ciclo annidato

Ecco la struttura JSON che useremo.

{
  "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
        }
      ]
    }
  ]
};

Questa struttura json può essere assegnata a una variabile o può essere una risposta di qualsiasi api.

Come possiamo vedere in questo JSON c'è un nodo esterno che contiene informazioni su di loro, e c'è un nodo interno che racconta le abilità di ciascun dipendente.

quindi qui creeremo un nidificato per ognuno utilizzando forca knockout. Ecco l'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>

Qui nel codice HTML sopra ci sono due liste che contengono il ciclo foreach. anello esterno terrà il nodo esterno della struttura JSON che è dipendenti. Il ciclo interno mantiene le abilità di ciascun dipendente. All'interno di ciascun ciclo possiamo accedere alle proprietà del nodo corrispondente. Per un esempio possiamo accedere al nome e alla valutazione all'interno del ciclo di competenze non dall'esterno.

Di seguito è riportato il codice javascript.

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

Formare il punto di vista javascript non c'è molto codice. possiamo assegnare direttamente il nostro json a un observablearray che verrà utilizzato da Html.