Pass a function that returns the value of the ko.computed Error when using ko.toJSON

Question

I am trying to serialize my viewmodel to JSON to send back to my server and I am receiving the following error.

Uncaught Error: Pass a function that returns the value of the ko.computed

The error happens on the var data = ko.toJSON(self, mapping); line and the mapping is a failed attempt to not try and convert the 'save' function to json. What am I doing wrong?

updated to include a JSFiddle

var model = {
  "LicenseID": "0e73d791-3ce4-e411-88ba-534e57038000",
  "UserName": "#My User",
  "UserID": "muUserID",
  "MacAddress": "4C-0B-BH-23-4V-BC",
  "ComputerName": "My User Description",
  "CompanyID": "314083b3-223c-415f-910f-dh7c13j45206",
  "TimeLog": false,
  "Reject": false,
  "Companies": [{
    "CompanyID": "7d5b63b3-b0f6-47de-b620-b611ede2c277",
    "Name": "Company 1",
    "Abbreviation": "Com1"
  }, {
    "CompanyID": "315083b4-223c-415f-910f-dc7c13c45206",
    "Name": "Company 2",
    "Abbreviation": "Com2"
  }],
  "LicensedComputers": [{
    "LicensingModel": {
      "Company": {
        "CompanyID": "315083b4-223c-415f-910f-dc7c13c45206",
        "Name": "Company 2",
        "Abbreviation": "Com2"
      },
      "LicenseID": "0e73d791-3ce4-e411-88ba-534e570032580",
      "UserName": "#My User",
      "UserID": "muUserID",
      "MacAddress": "4C-0B-BH-23-4V-BC",
      "ComputerName": "My User Description",
      "TimeLog": false,
      "Reject": false,
      "LastSuccessfulUse": null,
      "CompanyID": "314083b3-223c-415f-910f-dh7c13j45206"
    },
    "LicensedComputerID": "d3f49e9a-75d4-4584-a52c-911c4e844d59",
    "LicenseID": "0e73d791-3ce4-e411-88ba-534e57000000",
    "MacAddress": "4C-0B-BE-23-4B-BC",
    "ComputerName": "My Computer Description"
  }]
};

function ViewModel(model) {
  var self = ko.mapping.fromJS(model);

  self.save = function() {
    var mapping = {
      'ignore': ["save"]
    }
    var data = ko.mapping.toJSON(self, mapping);
    $.post("/Licensing/edit", data, function(returnedData) {
      // This callback is executed if the post was successful
    });
  }

  return self;

};

var vm = ViewModel(model);
ko.applyBindings(vm);

<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.js"></script>

<div class="form-horizontal">
  <h4>License</h4>

  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">User Name</label>
    <div class="col-sm-10">
      <input data-bind='value: UserName' class="form-control">
    </div>
  </div>

  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">User ID</label>
    <div class="col-sm-10">
      <input data-bind='value: UserID' class="form-control">
    </div>
  </div>

  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Company</label>
    <div class="col-sm-10">
      <select data-bind="options: Companies, optionsText: 'Name', optionsValue: CompanyID, value: CompanyID" class="form-control"></select>
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-10">
      <div class="checkbox">
        <label>
          @*
          <input data-bind='value: Reject' type="checkbox">*@ Reject
        </label>
      </div>
    </div>
  </div>

  <h4>Computers</h4>
  <table data-bind='visible: LicensedComputers().length > 0' class="datagrid" style="width: 1000px">
    <thead>
      <tr>
        <th>Computer Name</th>
        <th>Mac Address</th>
        <th />
      </tr>
    </thead>
    <tbody data-bind='foreach: LicensedComputers'>
      <tr>
        <td>
          <input class='required' data-bind='value: MacAddress, uniqueName: true' />
        </td>
        <td>
          <input data-bind='value: ComputerName' />
        </td>
        <td><a href='#' data-bind='click: $root.removeGift'>Delete</a>
        </td>
      </tr>
    </tbody>
  </table>

  <div class="form-group">
    <div class="col-md-offset-2 col-md-10">
      <button data-bind="click: save" class="btn btn-default">Save</button>
    </div>
  </div>
</div>

Answer 1

I copied your code to a fiddle and disabled the post action. I got a perplexing SecurityError, but found that when I commented out this section of your HTML, the error went away:

<!--div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Company</label>
    <div class="col-sm-10">
        <select data-bind="options: Companies, optionsText: 'Name', optionsValue: CompanyID, value: CompanyID" class="form-control"></select>
    </div>
</div-->

Note that CompanyID is not in quotes here. You're using the CompanyID member of the model for the name of the value field. When I quoted it, the error went away.

http://jsfiddle.net/49etLon9/2/