title: Basic knockout Save parent on child changes
body: <p>I have a basic knockout question:
  I have an list of objects in this format:</p>
  
  <pre><code> [{ Name: "Colors1", Values: ["red", "yellow", "blue"] },
   { Name: "Colors2", Values: ["red", "pink", "blue"] },
   { Name: "Colors3", Values: ["black", "white", "green"] }]);
  </code></pre>
  
  <p>I want to have a dropdown with the Name of the colors. And on selection change, the colors in Values should be displayed in text boxes.
  When a color is changed in the textbox, the entire record should be updated immediately.</p>
  
  <p>Here is what I have:</p>
  
  <pre><code>            &lt;div&gt; 
                      &lt;select data-bind="options:myitems, optionsText:'Name', optionsValue:'Name', optionsCaption:'Please select a color', value:selectedColor"&gt;&lt;/select&gt;
  
                      &lt;table&gt;
                          &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Color&lt;/th&gt;
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tbody data-bind="foreach:listofColors()?  "&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;&lt;input data-bind="value:Value, event: { change : $parent.SaveUpdatedColors($root)?}" /&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
          //-----------------------------------   // 
                 &lt;script&gt;    
                  var  viewModel= function() {
                          var self = this;
                          self.selectedColorChoice = ko.observable();
                          self.listofColors = ko.observableArray();
  
                          self.myitems = ko.observableArray(
                              [{ Name: "Colors1", Values: ["red", "yellow", "blue"] },
                              { Name: "Colors2", Values: ["red", "pink", "blue"] },
                              { Name: "Colors3", Values: ["black", "white", "green"] }]);
                  var getByName = function (items, name) {
                  return ko.utils.arrayFirst(items, function (item) {
                      return item.Name === name;
                                });
                             };
  
  
     self.selectedColor.subscribe(function(item) //NOT WORKING
      {
          self.listofColors = ko.computed(function () {
              var selColor = getByName(self.myitems(), self.selectedColor);
              return selColor ? ko.utils.arrayMap(selColor.Values, function (item) {
                  return {
                      Name: item.Name,
                      Value: item.Value
                  };
              }) : [];
          }, this);
      })
                          })
  
      self.SaveUpdatedColors=function(fullRecord)
      { //logic to update}
                      }
                      ko.applyBindings(new viewModel());
              &lt;/script&gt;
  </code></pre>
  
  <p>How do I proceed ? Thanks in advance.</p>