Table generated via knockout

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<ul class="nav nav-tabs">
  <li class="active">
    <a href="#" data-bind="click: changeTitle.bind($root, 'Warnings')">Warnings</a>
  </li>
  <li><a href="#" data-bind="click: changeTitle.bind($root, 'Errors')">Errors</a></li>
</ul>

<table class="table table-hover" data-bind="foreach: data">
    <thead>
       <tr>
           <th style="width:100px">Numero</th>
           <th>Description</th>
       </tr>
    </thead>
    <tbody data-bind="foreach: data[dataTitle].content">
        <tr>
            <td data-bind="text: $data.number"></td>
            <td data-bind="text: $data.description"></td>
        </tr>
    </tbody>
</table>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

JavaScript

function tableViewModel() {
    var self = this;
    self.data = ko.observableArray();
    self.dataTitle = ko.observable("Warnings")
  debugger;
    self.data.push({
  "Warnings": {
    "numbers": 30,
    "content": [
      {
        "number" : 3001,
        "description" : "There may be a problem with the device you are using if you use the default profile"
      },
        {
        "number" : 3002,
        "description" : "There may be a problem with the device you are using if you don't use the default profile"
      }
    ]
  },
  "Errors": {
    "numbers": 20,
    "content": [
      {
        "number": 1000,
        "description": "No network is loaded"
      },
        {
        "number": 1000,
        "description": "No network is loaded"
      }
    ]
  }
})
    
    self.changeTitle = function(title) {
         self.dataTitle(title);   
    } 
     
}
ko.applyBindings(tableViewModel());