title: Javascript knockout binding nested objects not working
body: <p>I'm am relatively new to the use of the knockout javascript library. I'm having a problem getting an observable property which is an object of another object. Here is my code:</p>
  
  <pre><code>function Customer(id) {
      var self = this;
  
      self.customer_id = ko.observable(id);
      self.custnum = -1;
  
      self.busname = ko.observable("");
      self.address = "";
      self.city = "";
      self.state_id = "";
      self.zipcode = "";
      self.cnt_sal_id = "";
      self.cnt_first_name = "";
      self.cnt_last_name = "";
      self.cnt_title = "";
  
      //alert("customer: " + self.customer_id());
  
  }
  
  
  var CustomerEntryViewModel = function(date) {
      var self = this;
  
      self.last_update = ko.observable(date);
      self.customer = ko.observable(new Customer(""));
  
      self.addCustomer = function (id) {
          var c = new Customer(id);
          self.customer = c;
          alert("New id: " + self.customer.customer_id() + " num: " + c.custnum);
      }
  
      self.customerSearch = function () {
      }
  
      self.editCustomer = function (customer_id) {
      }
  
      self.save = function(customer) {    
      }           
  }
  </code></pre>
  
  <p>How do I go about binding to the properties in the Customer object. I try to to use typical javascript dot notation like so: customer.customer_id</p>
  
  <p>Here is the html that binds the data:</p>
  
  <pre><code>&lt;div class="field-input" style="margin-bottom:10px;"&gt;
      &lt;input type="text" id="customer_id" style="width:100%;" 
          data-bind="jqxInput: { placeHolder: 'Customer #', value: 
                                 customer().customer_id, height: 21, width: 208, 
                                 minLength: 1, disabled: true }"/&gt;
  &lt;/div&gt;
  </code></pre>