Knockout.Mapping - 当我使用自定义映射时如何取消映射？答案

【问题标题】：Knockout.Mapping - how to unmap when I've used a custom mapping?Knockout.Mapping - 当我使用自定义映射时如何取消映射？
【发布时间】：2013-07-31 12:14:37
【问题描述】：

我使用knockout.mapping 插件这样就不必获取moment 对象而不是糟糕的日期：

var mappedPeople = ko.mapping.fromJS(people, {
    Birthdate: {
        create: function(op) {
            return ko.observable( moment( new Date(op.data) ) );
        }
    }
});

酷。

现在，在进行修改后，我想将整个数组返回到常规 js。听起来像是ko.mapping.toJS 的工作！

但是我该如何回到日期呢？ toJS 似乎接受了一个选项对象，但我似乎找不到对此有帮助的选项。

更新：我知道在使用 moment.js 的特定场景中，有办法通过强制字符串和重新包装来解决这个问题，根本问题是关于如何为插件提供自定义“取消映射”功能。

更新 2：这是一个演示问题的 jsbin：http://jsbin.com/uzesag/1/

【问题讨论】：

查看更多代码会有所帮助。你能把它扩展一点来做一个工作的例子吗？您提到的 toJS 方法似乎是一个不错的选择，为什么它不起作用？
你能发布你得到什么和你想得到什么的例子吗？
@Jeroen 你们去吧：jsbin.com/uzesag/1
一般情况下，您可以通过调用 ko.mapping.visitModel(root, callback) 进行自定义取消映射。但是在您的特定问题中，您的时刻对象具有从库派生的许多属性和方法。通过 Moment 原型添加了更多方法。所有这些额外的属性都被 ko.mapping.visitModel 作为模型的一部分进行遍历。所以我建议在你的视图模型中只使用与 JSON 兼容的原语
嗯听起来是一个很大的限制。拉取请求时间！

标签： knockout.js knockout-mapping-plugin

【解决方案1】：

我知道这并不是严格地回答如何自定义取消映射本身的问题，但我发现处理这种情况的一种有用方法是将原始数据包装在可观察对象中，但添加计算的可观察对象（子可观察对象) 到可观察对象本身。最好用一个例子来说明......

JSBin showing moment added as sub-observable on Birthdate

关键sn-p在这里……

    var mappedPeople = ko.mapping.fromJS(people, {
      Birthdate: {
          create: function(op) {

              var observable = ko.observable(op.data);

              // Attach computed to 'Birthdate' that produces moment
              observable.moment = ko.computed({
                read: function() {
                  return moment( new Date(observable()) );
                },
                write: function(val) {
                  observable(val.toDate().toISOString());
                }
              });

              return observable;      
          }
      }
  });

这意味着当您调用 ko.mapping.toJS 或 ko.mapping.toJSON 时，会保留原始结构。诀窍是您实际上需要将时刻存储回计算（以使其与包含在 observable 中的原始数据同步）...

function VM() {
  this.mapped = mappedPeople;

  // read moment computed
  var moment = this.mapped()[0].Birthdate.moment();

  // manipulate
  moment.add(5, 'y');

  // set it back
  this.mapped()[0].Birthdate.moment(moment);

  // unmapping 
  this.unmapped = ko.mapping.toJSON(this.mapped);
}

ko.applyBindings(new VM());

【讨论】：