Company - KO Observable

by dougiei

HTML

<div data-bind="text: ko.toJSON(companies())"></div>

<ul data-bind="text: companies()">
  <li>
    The current item is: <b data-bind="text: $index"></b>
    <span data-bind="text: name"> </span>
    <ul data-bind="foreach: phoneNumber">
      <li>
        <span data-bind="text: type"></span>
        <span data-bind="text: number"></span>
      </li>
    </ul>
  </li>
</ul>

<ul data-bind="foreach: companies">
  <li>
    The current item is: <b data-bind="text: $index"></b>
    <span data-bind="text: name"> </span>
    <ul data-bind="foreach: phoneNumber">
      <li>
        <span data-bind="text: type"></span>
        <span data-bind="text: number"></span>
      </li>
    </ul>
  </li>
</ul>

<table id="devtable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Address</th>
      <th>City</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: companies">
    
    <tr data-bind='click: $parent.selecItem'>
      <td data-bind="text: name"></td>
      <td data-bind="text: address.streetAddress"></td>
      <td data-bind="text: address.city"></td>

      <td data-bind="text: address.phoneNumber"></td>
    </tr>
  </tbody>
</table>

JavaScript

var viewmodel = {
 
  
  companies: ko.observableArray([{
    "name": "mkyong1",
    "age": 30,
    "address": {
      "streetAddress": "18 8nd Street",
      "city": "New York"
    },
    "phoneNumber": [{
      "type": "home",
      "number": "111 111-1111"
    }, {
      "type": "fax",
      "number": "222 222-2222"
    }]
  }, {
    "name": "mkyong2",
    "age": 30,
    "address": {
      "streetAddress": "28 8nd Street",
      "city": "New York2"
    },
    "phoneNumber": [{
      "type": "home",
      "number": "211 111-1111"
    }, {
      "type": "fax",
      "number": "222 222-2222"
    }]
  }, {
    "name": "mkyong",
    "age": 30,
    "address": {
      "streetAddress": "38 8nd Street",
      "city": "New York3"
    },
    "phoneNumber": [{
      "type": "home",
      "number": "311 111-1111"
    }, {
      "type": "fax",
      "number": "222 222-2222"
    }]
  }])
}
 

ko.applyBindings(viewmodel);