title: KnockoutJS Nested list
body: <p>i am KnockoutJS newbie.</p>
  
  <p>I have a view written below and can't see categoryVariables for each categories in runtime.
  Can you have a look and say what is wrong here?</p>
  
  <p>Thanks for your help.</p>
  
  <p>My code view:</p>
  
  <pre><code>&lt;table class="table"&gt;
      &lt;thead&gt;
      &lt;/thead&gt;
      &lt;tbody data-bind="foreach: categories"&gt;
          &lt;tr&gt;
              &lt;td data-bind="text: Name"&gt;
                  &lt;table&gt;
                      &lt;tbody data-bind="foreach: categoryVariables"&gt;
                          &lt;tr&gt;
                              &lt;td data-bind="text: Name"&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/td&gt;
              &lt;td&gt;&lt;button data-bind='click: $root.addCategoryVariable'&gt;Add a category variable&lt;/button&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;button data-bind='click: addCategory'&gt;Add a category&lt;/button&gt;
  
  &lt;script type="text/javascript"&gt;
  
      var resumeDataViewModel;
  
      function Category(data) {
          var self = this;
  
          self.ID = data.ID;
          self.Name = data.Name;
  
          self.categoryVariables = ko.observableArray([
              new CategoryVariable({ID: '1', Name: 'asd'})
          ]);
      }
  
      function CategoryVariable(data) {
          var self = this;
  
          self.ID = data.ID;
          self.Name = data.Name;
      }
  
      function ResumeDataViewModel() {
          var self = this;
  
          self.categories = ko.observableArray([
              new Category({ID: '1', Name : 'Contact', Category: {ID: '1', Name: 'gfdg'}}),
              new Category({ID: '2', Name : 'Education', Category: {ID: '2', Name: 'asdasd'}})
          ]);
  
          self.addCategory = function(){
              self.categories.push(new Category({
                  Name: "sa d"
              }));
          }
  
          self.addCategoryVariable = function (category) {
              category.categoryVariables.push(new CategoryVariable({
                  Name: 'asd'
              }));
          }
      }
  
      ko.applyBindings(resumeDataViewModel = new ResumeDataViewModel());
  &lt;/script&gt;
  </code></pre>
  
  <p>Looking for your reply. Thanks you so much.</p>