如何使用附加属性“动态”扩展映射的淘汰视图模型？

Question

我从我的 ASP.NET Web API 获取一个 json 对象数组并将其映射到我的淘汰视图模型 (ko.observablearray)。将模型绑定到文档时，出现“无法处理绑定”错误。

这是因为我从 API 获得的 json dto 没有定义 Editable 属性。如何在映射时即时添加它？默认应该是false。

代码如下：

var Accessory = function (id, leftOnPatient, reject, amount, patchNumber, additionalInfo, editable) {
  var self = this;

  self.Id = ko.observable(id);
  self.LeftOnPatient = ko.observable(leftOnPatient);
  self.Reject = ko.observable(reject);
  self.Amount = ko.observable(amount);
  self.PatchNumber = ko.observable(patchNumber);
  self.AdditionalInfo = ko.observable(additionalInfo);
  self.Editable = ko.observable(editable); 
}

function MedicinesAndAccessoriesViewModel() {
  var self = this;

  self.Accessories = ko.observableArray([]);
  self.error = ko.observable();

  function getAllAccessories() {
    ajaxHelper(accessoriesUri, 'GET').done(function (data) {
      ko.mapping.fromJS(data, {}, self.Accessories);     
    });
  };

  getAllAccessories(); 
};

var vm = new MedicinesAndAccessoriesViewModel();
ko.applyBindings(vm, document.getElementById("medicinesAndAccessoriesTab"));

HTML：

<ol class="list-group list_of_items padding-top-15" data-bind="foreach: Accessories">
        <li class="list-group-item">
            <div class="container-fluid">
                <div class="col-md-4">
                    <span data-bind="text: Id, visible: !Editable()"></span> //Here I get the error
....
...
..
.

那么，如何为从 API 加载的每个 Accessory 定义 Editable(false) 属性客户端？我从 API 加载的 dto 获得的所有其他属性。可以在映射时以某种方式完成吗？

Answer 1

您目前根本没有在任何地方使用Accessory 构造函数，该词在您的 sn-p 中的定义处仅出现一次...

您需要利用您的映射定义并告诉它正确映射您的 json 部分，例如：

function getAllAccessories() {
    ajaxHelper(accessoriesUri, 'GET').done(function (data) {
        var mappingRules = {
            'accessories': {
                create: function(options) {
                    return new Accessory(
                        options.data.id, 
                        options.data.leftOnPatient, 
                        options.data.reject, 
                        options.data.amount, 
                        options.data.patchNumber, 
                        options.data.additionalInfo, 
                        options.data.editable);
                }
            }
        };

        ko.mapping.fromJS(data, mappingRules, self.Accessories);     
    });
};

这应该已经确保Editable observable 存在。您可以尝试使用 !! 将其强制为布尔值，以防万一：

self.Editable = ko.observable(!!editable); 

附言。我建议通过将参数的数量减少到一个（例如data 或dto）来稍微简化构造函数，这样return new Accessory(options.data) 就可以在上面的sn-p 中使用。