有什么方法可以控制 ko.toJS / ko.toJSON？答案

【问题标题】：Is there any way to control ko.toJS / ko.toJSON?有什么方法可以控制 ko.toJS / ko.toJSON？
【发布时间】：2012-11-29 07:49:22
【问题描述】：

var mappingSetting = {
  'user' : {
      create: function(options.data){
          options.data.isActive = options.data.isActive == 1 ? 'Yes' : 'No';
          options.data.startDate = $.datepicker.format('dd/MM/yy', options.data.startDate)
          return options.data;
          }
     }
};

var viewModel = {};

$.ajax({
   url: '/api/users/GetAll',
   .....
   success: functions (data) {
       viewModel = ko.mapping.fromJS(data, mappingSetting);
       ko.applyBindings(viewModel);
   },
});

$("#savebtn").click(function(){
    var dataToSave = ko.toJS(viewModel);
    // ajax call to save
});

ajax结果

[{username: 'users1', isActive:1, startDate:'2001-03-22T00:00:00CET'}, {username: 'users2', isActive:0, startDate:'2008-03-22T00:00:00CET'}]

我必须在 isActive 的基础上显示是/否，但在保存时我必须将其改回 0 / 1。

我有很多字段和日期（当地文化格式）。

【问题讨论】：

标签： knockout.js knockout-mapping-plugin

【解决方案1】：

您最好将 isActive 保留为布尔值，并使用计算函数或自定义绑定处理程序，在给定 isActive 值的情况下显示“是”/“否”。

自定义绑定处理程序

ko.bindingHandlers.formatBool = {
  update: function(element, valueAccessor, allBindingsAccessor) {
     var value = ko.utils.unwrapObservable(valueAccessor());
     var text = value ? "Yes" : "No";

     ko.bindingHandlers.text.update(element, function() { return text; });
  }
};

这里以jsFiddle 为例。

计算的“格式化”值

由于您使用映射插件来构建整个 viewModel，这可能不是最佳解决方案，但使用计算格式来格式化其他可观察值通常很有用。

viewModel.options.data.isActive.formatted = ko.computed(function(){
  return viewmodel.options.data.isActive ? "Yes" : "No";
});

覆盖到JSON

也就是说，如果您真的更喜欢覆盖 toJS/toJSON 函数，您可以在视图模型上覆盖这些方法。

viewModel.toJSON = function(){
  var copy = ko.toJS(this);
  copy.isActive = copy.isActive === "Yes" ? 1 : 0;
  return copy;
}

这是 Ryan Niemeyer 的 great article，它准确地解释了这是如何完成的。

【讨论】：