在使用 ko.toJSON 时传递一个返回 ko.computed 错误值的函数答案

【问题标题】：Pass a function that returns the value of the ko.computed Error when using ko.toJSON在使用 ko.toJSON 时传递一个返回 ko.computed 错误值的函数
【发布时间】：2015-08-25 20:56:45
【问题描述】：

我正在尝试将我的视图模型序列化为 JSON 以发送回我的服务器，但我收到以下错误。

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

错误发生在 var data = ko.toJSON(self, mapping);行和映射是不尝试将“保存”函数转换为 json 的失败尝试。我做错了什么？

更新为包含 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>

【问题讨论】：

尝试将其更改为ko.mapping.toJSON，不确定您是否调用了正确的函数。
我已经更改了它并且发生了同样的错误，我也更新了问题中的代码示例。
文档似乎将ignore 作为ko.mapping.fromJS 函数的一部分。我在toJSON 函数上没有看到它
我本来打算放弃这个答案stackoverflow.com/questions/14988220/…
我没有看到.toJSON 在这些答案中使用。 :)

标签： javascript json knockout.js knockout-mapping-plugin

【解决方案1】：

我将您的代码复制到小提琴并禁用了发布操作。我遇到了一个令人困惑的 SecurityError，但发现当我注释掉您的 HTML 的这一部分时，错误就消失了：

<!--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-->

请注意，此处的 CompanyID 不在引号中。您使用模型的 CompanyID 成员作为值字段的名称。当我引用它时，错误就消失了。

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

【讨论】：

就是这样。谢谢。