KO.Mapping 自定义属性

在KnockoutJS 进阶学习中提到了KO中一个非常好用的插件: ko.mapping, 它可以快速将JS或JSON对象完全地转化成Observable, 让我们先来回忆下它的基本用法：

var data = [{
    Id: "123",
    FirstName: "Jack",
    LastName: "Tim",
    Schedule: [
    { Date: "2015-7-5",
    Event: "Visit Customer"
    },
    { Date: "2015-7-6",
    Event: "Company Party"},
    ]
},
{
    Id: "110",
    FirstName: "Tony",
    LastName: "Alan",
    Schedule: [
    { Date: "2015-7-5",
    Event: "1:1 Talk with my boss"
    },
    { Date: "2015-7-6",
    Event: "Attend business meeting"},
    ]
}];
self.newData = ko.mapping.fromJS(data); 

一个简单的语句ko.mapping.fromJS，data里面的所有数据都会变成observable/observableArray，包括嵌套的数组Schedule。

当原始数据data变化时，可以使用下面这个语法来更新已经创建好的Observable对象

ko.mapping.fromJS(data,self.newData);  

如果想把observable对象还原成原来的JS对象，可以用toJS方法：

var unmapped = ko.mapping.toJS(self.newData);

在实际的项目中，从后台获取的数据往往不能满足前端页面展示的需要，需要做些修改或添加其他的字段，比如这2种场景：
1. 从后台获取了FirstName和LastName，我想在页面换个格式显示
2. 仅仅显示个人名字还不够，还要显示公司的信息，需要通过Id再调用其它的方法获取数据。

第一种需求还好，可以在HTML里把FirstName和LastName再拼一起；

第2个需求就比较麻烦，一般的做法是在转化成新的Observable对象后，通过遍历查找每个人的公司信息，再添加到newData对象里。由于在使用ko.mapping时， ko肯定会对data做遍历，再变成Observable对象后再来一次遍历效率会大大降低， 有什么更好的方法呢？ ko.mapping插件提供了额外的mapping方法，在转换过程中可以添加其他的属性：

self.newDataV2 = ko.mapping.fromJS(data, mapping);
var mapping = {
   create: function (options) {
         return getCompanyInfo(options.data);
   }
};

function getCompanyInfo(data) {
    var results = ko.mapping.fromJS(data, {}, this);
    results.FullName = data.Name_1stLang + '(' + data.Name_2ndLang + ')'; //新添加的属性
    results.CompanyInfo = {};
    $.ajax({
        url:"getCompanyInfo(data.Id)",
        async:false
          }).success(function(result){
                    results.CompanyInfo = result;
            }); //新添加的属性
          };

这样， FullName和CompanyInfo就在newDataV2 中出现了，而且是Observable的对象。