title: knockout.js modal binding value update
body: <p>I have the following code in this jsFiddle.</p>
  
  <p>The problem I'm having is that my child items do not update properly.  </p>
  
  <p>I can Click "Edit User" with a problem and see the data changing, but when I attempt to add a note or even if I were to write an edit note function, the data does not bind properly</p>
  
  <p><a href="http://jsfiddle.net/jkuGU/10/" rel="nofollow">http://jsfiddle.net/jkuGU/10/</a></p>
  
  <pre><code>&lt;ul data-bind="foreach: Users"&gt;
  &lt;li&gt;
      &lt;span data-bind="text: Name"&gt;&lt;/span&gt;   
      &lt;div data-bind="foreach: notes"&gt;
          &lt;span data-bind="text: text"&gt;&lt;/span&gt;
          &lt;a href="#" data-bind="click: $parent.editNote"&gt;Edit Note&lt;/a&gt;
      &lt;/div&gt;
      &lt;a href="#" data-bind="click: $parent.addNote"&gt;Add Note&lt;/a&gt;
       &lt;a href="#" data-bind="click: $parent.EditUser"&gt;Edit user&lt;/a&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  
      &lt;div id="userModal" data-bind="with: EditingUser" class="fade hjde modal"&gt;
          &lt;div class="modal-header"&gt;
              &lt;a class="close" data-dismiss="modal"&gt;×&lt;/a&gt;
              &lt;h3&gt;
                  Editing user&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;label&gt;
                  Name:&lt;/label&gt;
              &lt;input type="text" data-bind="value: Name, valueUpdate: 'afterkeydown'" /&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
               &lt;a href="#" class="btn btn-primary"&gt;Save changes&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;div id="addJobNoteModal" data-bind="with: detailedNote" class="fade hjde modal"&gt;
          &lt;div class="modal-header"&gt;
              &lt;a class="close" data-dismiss="modal"&gt;×&lt;/a&gt;
              &lt;h3&gt;
                  Editing Note&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;label&gt;
                  Text:&lt;/label&gt;
              &lt;input type="text" data-bind="value: text, valueUpdate: 'afterkeydown'" /&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
               &lt;a href="#" class="btn btn-primary" data-dismiss="modal"&gt;Save changes&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  ​
  
  
  
  function Note(text) {
      this.text = text;
  }
  
  var User = function(name) {
      var self = this;
      self.Name = ko.observable(name);
      this.notes = ko.observableArray([]);
  }
  
  var ViewModel = function() {
      var self = this;
      self.Users = ko.observableArray();
  
      self.EditingUser = ko.observable();
      self.detailedNote = ko.observable();
      self.EditUser = function(user) {
          self.EditingUser(user);
          $("#userModal").modal("show");
      };
  
  
      this.addNote = function(user) {
          var note= new Note("original")
          self.detailedNote(note);
          $("#addJobNoteModal").find('.btn-warning').click(function() {
              user.notes.push(note);
              $(this).unbind('click');
          });
  
          $("#addJobNoteModal").modal("show");
      }
  
      for (var i = 1; i &lt;= 10; i++) {
          self.Users.push(new User('User ' + i));
      }
  }
  
  ko.applyBindings(new ViewModel());​
  </code></pre>