title: Knockout how do I set value in child observable
body: <p>I am trying to implement inline editing using templates. On my viewmodel, I have an method : self.changeMode. I am triggering this from a button click event ( inside the template). The data parameter that is passed to the changeMode function contains is the expected data but I need to change the observable. How do I do this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var MyViewModel = function (data) {
      var self = this;
  
      self.managingAgentId = ko.observable(data.managingAgentId);
      self.companyName = ko.observable(data.companyName);
      self.companyNumber = ko.observable(data.companyNumber);
      self.isActive = ko.observable(data.isActive);
      self.agents = ko.observableArray(data.agents);
      
      // Change to Edit or Display mode
      self.changeMode = function (data,event) {
          event.preventDefault();
          // =&gt; need to change mode here!
      };
  }
  
  
  $(function () {
  
          $.ajax({
              type: "GET",
              url: ma.Urls.LoadManagingAgent
          }).done(function (result) {
              $.each(result.agents, function (index, element) {
                  element.mode = "display";
              });
              
              ko.applyBindings(new MyViewModel(result));
          }).error(function (response) {
              addMessage(response);
          });
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/html" id="display"&gt;
      &lt;td data-bind="text: managingAgentMemberId"&gt;&lt;/td&gt;
      &lt;td data-bind="text: applicationUser.userName"&gt;&lt;/td&gt;
      &lt;td data-bind="text: applicationUser.email"&gt;&lt;/td&gt;
      &lt;td data-bind="text: applicationUser.emailConfirmed"&gt;&lt;/td&gt;
      &lt;td data-bind="text: isActive"&gt;&lt;/td&gt;
      &lt;td&gt;
          &lt;button class="btn btn-success btn-sm" data-bind="click:$root.changeMode"&gt;
              &lt;i class="fa fa-edit"&gt;&lt;/i&gt;
              Edit
          &lt;/button&gt;
      &lt;/td&gt;
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/html" id="edit"&gt;
      &lt;td data-bind="text: managingAgentMemberId"&gt;&lt;/td&gt;
      &lt;td data-bind="text: applicationUser.userName"&gt;&lt;/td&gt;
      &lt;td data-bind="text: applicationUser.email"&gt;&lt;/td&gt;
      &lt;td data-bind="text: applicationUser.emailConfirmed"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="checkbox" data-bind="checked: isActive" /&gt; &lt;/td&gt;
      &lt;td&gt;
          &lt;button class="btn btn-success btn-sm kout-update"&gt;
              &lt;i class="fa fa-save"&gt;&lt;/i&gt;
              Update
          &lt;/button&gt;
          &lt;button class="btn btn-danger btn-sm kout-cancel"&gt;
              &lt;i class="fa fa-stop"&gt;&lt;/i&gt;
              Cancel
          &lt;/button&gt;
      &lt;/td&gt;
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/bdBwO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bdBwO.png" alt="enter image description here"></a></p>