2 
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。

我有很多领域，还有日期（当地文化格式）。

4

1 回答 1

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.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 的一篇很棒的文章，它准确地解释了这是如何完成的。

于 2013-06-18T04:02:25.917 回答