title: How do I call my viewmodel function from its view - child of viewmodel (knockout.js)
body: <p>I have a view called agency and a viewmodel. The viewmodel has a property also called agency where the data is contained. This data also has children but on my view my function doesn't fire when it is a child.</p>
  
  <pre><code>&lt;section class="view"&gt;
      &lt;header&gt;
          &lt;button class="btn btn-info btn-force-refresh pull-right"
              data-bind="click: refresh"&gt;
              &lt;i class="icon-refresh"&gt;&lt;/i&gt;Refresh&lt;/button&gt;
  
          &lt;button class="btn btn-info"
              data-bind="click: save"&gt;
              &lt;i class="icon-save"&gt;&lt;/i&gt;Submit data&lt;/button&gt;
          &lt;br /&gt;
          &lt;br /&gt;
  
          &lt;h3 class="page-title" data-bind="text: title"&gt;&lt;/h3&gt;
          &lt;div class="article-counter"&gt;
              &lt;address data-bind="text: agency().length"&gt;&lt;/address&gt;
              &lt;address&gt;found&lt;/address&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  
      &lt;table&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Agency Name&lt;/th&gt;
                  &lt;th&gt;Category&lt;/th&gt;
                  &lt;th&gt;URL&lt;/th&gt;
                  &lt;th&gt;Number of employees&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody data-bind="foreach: agency"&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;!--&lt;input data-bind="value: agencyName" /&gt;&lt;/td&gt;--&gt;
                      &lt;input data-bind="value: agencyName, event: { change: $parent.cacheForm }" /&gt;
                  &lt;td&gt;
                      &lt;input data-bind="value: category, event: { change: $parent.cacheForm }" /&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;input data-bind="value: uRL, event: { change: $parent.cacheForm }" /&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;input data-bind="value: numberOfEmployees, event: { change: $parent.cacheForm }" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Activities&lt;/td&gt;
                  &lt;td&gt;Declared Billings&lt;/td&gt;
                  &lt;td&gt;Campaigned Billings&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;input data-bind="value: activities, event: { change: $parent.cacheForm }" /&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;input data-bind="value: declaredBillings, event: { change: $parent.cacheForm }" /&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;input data-bind="value: campaignBillings, event: { change: $parent.cacheForm }" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  
      &lt;div class="article-counter"&gt;
          &lt;div data-bind="foreach: agency"&gt;
              &lt;address data-bind="text: offices().length"&gt;&lt;/address&gt;
              &lt;address&gt;found&lt;/address&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div data-bind="foreach: agency"&gt;
          &lt;div data-bind="foreach: offices"&gt;
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;h1&gt;Offices&lt;/h1&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;div&gt;
                              &lt;table&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Address1&lt;/td&gt;
                                      &lt;td&gt;Address2&lt;/td&gt;
                                      &lt;td&gt;Address3&lt;/td&gt;
                                      &lt;td&gt;Address4&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;
                                          &lt;input data-bind="value: address1, event: { change: $parent.cacheForm }" /&gt;
                                      &lt;/td&gt;
  
                                      &lt;td&gt;
                                          &lt;input data-bind="value: address2, event: { change: $parent.cacheForm }" /&gt;
                                      &lt;/td&gt;
  
                                      &lt;td&gt;
                                          &lt;input data-bind="value: address3, event: { change: $parent.cacheForm }" /&gt;
                                      &lt;/td&gt;
  
                                      &lt;td&gt;
                                          &lt;input data-bind="value: address4, event: { change: $parent.cacheForm }" /&gt;
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
  
                                  &lt;tr&gt;
                                      &lt;td&gt;Address5&lt;/td&gt;
                                      &lt;td&gt;faxNumber&lt;/td&gt;
                                      &lt;td&gt;postCode&lt;/td&gt;
                                      &lt;td&gt;telephoneNumber&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;
                                          &lt;input data-bind="value: address5, event: { change: $parent.cacheForm }" /&gt;
                                      &lt;/td&gt;
                                      &lt;td&gt;
                                          &lt;input data-bind="value: faxNumber, event: { change: $parent.cacheForm }" /&gt;
                                      &lt;/td&gt;
                                      &lt;td&gt;
                                          &lt;input data-bind="value: postCode, event: { change: $parent.cacheForm }" /&gt;
                                      &lt;/td&gt;
                                      &lt;td&gt;
                                          &lt;input data-bind="value: telephoneNumber, event: { change: $parent.cacheForm }" /&gt;
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/table&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;div class="article-counter"&gt;
                              &lt;address data-bind="text: contacts().length"&gt;&lt;/address&gt;
                              &lt;address&gt;found&lt;/address&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;div data-bind="foreach: contacts"&gt;
                              &lt;table&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Title&lt;/td&gt;
                                      &lt;td&gt;First Name&lt;/td&gt;
                                      &lt;td&gt;Surname&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;
                                          &lt;input data-bind="value: title, event: { change: $parent.cacheForm }" /&gt;
                                      &lt;/td&gt;
                                      &lt;td&gt;
                                          &lt;input data-bind="value: firstName, event: { change: $parent.cacheForm }" /&gt;
                                      &lt;/td&gt;
                                      &lt;td&gt;
                                          &lt;input data-bind="value: surName, event: { change: $parent.cacheForm }" /&gt;
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/table&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>When I change these values for example my function fires, it is the parent.</strong></p>
  
  <pre><code>&lt;tbody data-bind="foreach: agency"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;!--&lt;input data-bind="value: agencyName" /&gt;&lt;/td&gt;--&gt;
                          &lt;input data-bind="value: agencyName, event: { change: $parent.cacheForm }" /&gt;
                      &lt;td&gt;
                          &lt;input data-bind="value: category, event: { change: $parent.cacheForm }" /&gt;&lt;/td&gt;
                      &lt;td&gt;
                          &lt;input data-bind="value: uRL, event: { change: $parent.cacheForm }" /&gt;&lt;/td&gt;
                      &lt;td&gt;
                          &lt;input data-bind="value: numberOfEmployees, event: { change: $parent.cacheForm }" /&gt;&lt;/td&gt;
                  &lt;/tr&gt;
  </code></pre>
  
  <p>When I loop inside each agency and then each office like this:</p>
  
  <pre><code>&lt;div data-bind="foreach: agency"&gt;
          &lt;div data-bind="foreach: offices"&gt;
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;h1&gt;Offices&lt;/h1&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;div&gt;
                              &lt;table&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Address1&lt;/td&gt;
                                      &lt;td&gt;Address2&lt;/td&gt;
                                      &lt;td&gt;Address3&lt;/td&gt;
                                      &lt;td&gt;Address4&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;
                                          &lt;input data-bind="value: address1, event: { change: $parent.cacheForm }" /&gt;
                                      &lt;/td&gt;
  
                                      &lt;td&gt;
                                          &lt;input data-bind="value: address2, event: { change: $parent.cacheForm }" /&gt;
                                      &lt;/td&gt;
  
                                      &lt;td&gt;
                                          &lt;input data-bind="value: address3, event: { change: $parent.cacheForm }" /&gt;
                                      &lt;/td&gt;
  
                                      &lt;td&gt;
                                          &lt;input data-bind="value: address4, event: { change: $parent.cacheForm }" /&gt;
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
  </code></pre>
  
  <p><strong>This function won't fire</strong></p>
  
  <pre><code>&lt;input data-bind="value: address1, event: { change: $parent.cacheForm }" /&gt;
  </code></pre>
  
  <p>I don't know the correct syntax to fire this function from agency.office.</p>
  
  <p><strong>This is my entire viewmodel</strong></p>
  
  <pre><code>define(['services/datacontext'], function (dataContext) {
      var initialized = false;
      var agency;
  
      if (localStorage.Agency &amp;&amp; localStorage.Offices &amp;&amp; localStorage.Contacts) {
          var objAgency = new Object(ko.mapping.fromJSON(localStorage.getItem('Agency')));
          var objOffices = new Object(ko.mapping.fromJSON(localStorage.getItem('Offices')));
          var objContacts = new Object(ko.mapping.fromJSON(localStorage.getItem('Contacts')));
  
          objAgency.offices = objOffices;
          objAgency.offices._latestValue[0].contacts = objContacts;
  
  
          agency = ko.observableArray([ko.mapping.fromJS(objAgency)]);
          ko.applyBindings(agency);
  
          initialized = true;
  
      }
      else {
          agency = ko.observableArray([]);
      }
  
  
      var save = function (agency, myStoredValue) {
          // Clear Cache because user submitted the form. We don't have to hold onto data anymore.
          //amplify.store("Agency", null);
          return dataContext.saveChanges(agency);
      };
  
      var vm = { // This is my view model, my functions are bound to it. 
          //These are wired up to my agency view
          activate: activate,
          agency: agency,
          title: 'agency',
          refresh: refresh, // call refresh function which calls get Agencies
          save: save,
          cacheForm: cacheForm
      };
      return vm;
  
      function activate() {
  
          vm.agency;
  
          if (initialized) {
              return;
          }
  
          initialized = false;
  
          return refresh();
  
      }
  
      function refresh() {
          return dataContext.getAgency(agency);
      }
  
  
      function cacheForm(agency) {
          // GET my object from agency vm
          var agency = ko.toJS(agency);
  
          var s = YUI().use("json-stringify", function (Y) {
  
              var jsonStrAgency = Y.JSON.stringify(agency, ["activities", "agencyName", "agencyID", "campaignBillings", "category", "declaredBillings", "immediateParent", "numberOfEmployees", "ultimateParent", "uRL"]); // Use an array of acceptable object key names as a whitelist.
              var jsonStrOffices, jsonStrContacts;
  
              for (i in agency.offices) {
                  jsonStrOffices = Y.JSON.stringify(agency.offices, ["address1", "address2", "address3", "address4", "address5", "agencyID", "faxNumber", "officeID", "postCode", "telephoneNumber"]);
  
                  for (ii in agency.offices[i].contacts) {
                      jsonStrContacts = Y.JSON.stringify(agency.offices[i].contacts, ["agencyID", "emailAddress", "firstName", "jobName", "officeID", "personID", "surName", "title"]);
                  }
              }
  
              localStorage.setItem('Agency', jsonStrAgency);
              localStorage.setItem('Offices', jsonStrOffices);
              localStorage.setItem('Contacts', jsonStrContacts);
          });
      }
  });
  </code></pre>
  
  <p>If my question doesn't make sense I can try to explain it better. I am new to using knockout so I don't know how to best explain it.</p>