如何从Knockoutjs到JS(）中排除某些属性

How to exclude certain properties from Knockoutjs toJS()

本文关键字：排除 属性 Knockoutjs JS      更新时间：2023-09-26

我有以下模型：

var model = {
   A: 'One',
   B: 'Two',
   C: 'Three'
};

我将各种UI元素绑定到这些字段，效果非常好。然而，我将模型转换回JavaScript对象，这样我就可以将任何更改保存到服务器：

var goingToServer = ko.toJS(model);

goingToServer将包括属性A、B和C。然而，假设属性C是一大块永远不会改变的数据。我希望避免将此信息发送回服务器。

在将模型转换回JavaScript对象时，是否有方法使toJS()仅包含预定义的字段集？

我一直在研究的一件事是Knockout Mapping插件。它有一个名为include的设置，记录如下：

将视图模型转换回JS对象时，默认情况下映射插件将只包括您的原始视图模型，但它也将包括Knockout生成了_destroy属性，即使它不是您的原始对象。但是，您可以选择自定义此阵列：

然而，这个插件似乎并没有像文档中所描述的那样工作，因为即使我传入['A', 'B']的include数组，ko.mapping.toJS()仍将包括A、B和C。我猜这个功能旨在包括原始模型中没有的其他字段。

在将模型转换回JavaScript对象时，有没有办法排除某些属性，而不是在发送到服务器之前做一些棘手的事情，比如生成对象并手动删除我不想要的属性？

您尝试过ignore关键字吗？它与include有类似的用法：

var mapping = {
    'ignore': ["propertyToIgnore", "alsoIgnoreThis"]
}
var viewModel = ko.mapping.toJS(data, mapping);

当你对服务器数据进行原始映射时，你可以使用ignore，然后当你把它转换回JS时，它就根本不在你的对象上了。

如果我们在vm下有一个复杂的对象模型实例。付款可观察参考：

{
    "Summary": { 
        "Count": 12,
        "PaymentAmount": 1500,
        "PaymentMethod": "Cheque",
        "PaymentDate": "2015-04-08T22:38:48.552Z",
        "AgentOid": 1208795,
        "AgentName": "Asere Ware"
    }
    //[...]
}

并且只需要忽略一些内部属性，那么：

var mapping = {
    'ignore': ['Summary.PaymentMethod', 'Summary.PaymentDate'] //avoid lost some initialized values.
};
// map updating existing observable (Payment) under my ViewMode (vm) with source "data" JSON object.
ko.mapping.fromJS(data, mapping, vm.Payment);

这是vm的结果。付款内容，其中只保留PaymentMethod和PaymentDate：

{
    "Summary": { 
        "Count": 0,
        "PaymentAmount": 0,
        "PaymentMethod": "Cheque",
        "PaymentDate": "2015-04-08T22:38:48.552Z",
        "AgentOid": undefined,
        "AgentName": undefined
    }
    //[...]
}

好吧，我已经找到了一个可行的解决方案，尽管我希望有更好的方法。诀窍是忽略映射插件中的这些字段，然后将它们手动添加为计算字段。调用toJS时，计算字段永远不会出现在生成的JavaScript对象中。

// Utility function to quickly generate a computed field
ko.readonly = function (value)
{
   return ko.computed(function ()
   {
      return value;
   });
};
// View Model
var ViewModel = function (project)
{
   var readonly = ['B', 'C', 'D']; // Fields I want to ignore
   var mapping = {
      'ignore': readonly //Read-only properties, we'll add these manually as computed fields
   };
   // Use Mapping plugin to make everything observable, except the fields above
   ko.mapping.fromJS(project, mapping, this);
   // Now loop through the read only array and add these fields in as computed
   for(var i = 0; i < readonly.length; i++)
   {
      var field = readonly[i];
      this[field] = ko.readonly(project[field]);
   }
}

我现在可以正常绑定到这些视图模型：

ko.applyBindings(new ViewModel(data));
相关文章：