knockout.js - Knockout how do I set value in child observable -

i trying implement inline editing using templates. on viewmodel, have method : self.changemode. triggering button click event ( inside template). data parameter passed changemode function contains expected data need change observable. how do this?

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 edit or display mode      self.changemode = function (data,event) {          event.preventdefault();          // => need 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);          });      });

<script type="text/html" id="display">      <td data-bind="text: managingagentmemberid"></td>      <td data-bind="text: applicationuser.username"></td>      <td data-bind="text: applicationuser.email"></td>      <td data-bind="text: applicationuser.emailconfirmed"></td>      <td data-bind="text: isactive"></td>      <td>          <button class="btn btn-success btn-sm" data-bind="click:$root.changemode">              <i class="fa fa-edit"></i>              edit          </button>      </td>  </script>

<script type="text/html" id="edit">      <td data-bind="text: managingagentmemberid"></td>      <td data-bind="text: applicationuser.username"></td>      <td data-bind="text: applicationuser.email"></td>      <td data-bind="text: applicationuser.emailconfirmed"></td>      <td><input type="checkbox" data-bind="checked: isactive" /> </td>      <td>          <button class="btn btn-success btn-sm kout-update">              <i class="fa fa-save"></i>              update          </button>          <button class="btn btn-danger btn-sm kout-cancel">              <i class="fa fa-stop"></i>              cancel          </button>      </td>  </script>

canonical solution:

function child(data) {      var self = this;      self.name = ko.observable();      self.mode = ko.observable('display');      ko.mapping.fromjs(data, child.mapping, self);  }  child.prototype.togglemode = function () {      this.mode(this.mode() === 'display' ? 'edit' : 'display');  };  child.mapping = {      // mapping rules, if applicable  };  function parent(data) {      var self = this;      self.children = ko.observablearray();      ko.mapping.fromjs(data, parent.mapping, self);  }  parent.mapping = {      children: {          create: function (options) {              return new child(options.data);          }      }  };    ko.applybindings(new parent({      children: [          {name: 'child 1'}, {name: 'child 2'}, {name: 'child 3'}      ]  }));

td:first-child {      width: 200px;  }  button {      width: 6em;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>    <table>      <tbody data-bind="foreach: children">          <tr data-bind="template: mode"></tr>      </tbody>  </table>    <script type="text/html" id="display">      <td data-bind="text: name"></td>      <td>          <button data-bind="click: togglemode">edit</button>      </td>  </script>    <script type="text/html" id="edit">      <td><input data-bind="value: name"></td>      <td>          <button data-bind="click: togglemode">save</button>      </td>  </script>