Question

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。

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

Answer 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，这可能不是最佳解决方案，但使用computed来格式化其他可观察值通常很有用。

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

覆盖toJSON

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

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

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

有没有办法控制ko.toJS / ko.toJSON？

1 个答案: