Knockout -视图模型转换

Question

在客户端，我必须对一个REST服务进行多个ajax调用，这将在JSON中提供三个不同的域模型。现在在客户端，在将它们绑定到控件之前，我必须将它们转换为视图模型。这将意味着将它们转换为完全不同的结构，只显示数据。任何想法或建议都会很有帮助。

Answer 1

http://jsfiddle.net/sujesharukil/RJGQw/

var vm1 = {
    Id: 1,
    Name: 'some name',
    Address1: 'Some street somewhere',
    City: 'New York',
    Country: 'USA',
    Zip : '11111'
};

var vm2 = {
    title: 'Mr',
    designations: ['Chief', 'Boss', 'Lord'],
    secrets: ['xxxxx','yyyyy','zzzzz']
};


var vmCombines = function(data1, data2){
    return {
        combinedName: ko.observable(data2.title +  ' ' + data1.Name),
        designation: ko.observable(function(){
            if(data2.designations.length == 0)
                return '';

            return data2.designations.join();
        }()),
        Address: ko.observable(function(){
            return data1.Address1 + ', ' + data1.City + ',' + data1.Country + ',' +     data1.Zip
        }())
    }
};

ko.applyBindings(new vmCombines(vm1, vm2));

和HTML

<input type="text" data-bind="value: combinedName"/><br />
<input type="text" data-bind="value: designation"/><br />
<input type="text" data-bind="value: Address"/><br />

Answer 2

var viewModel = JSON.parse(jsonContentFromService)；

然后可能是这样的：

var mainVM = {};

mainVM.SomeStuffFromVm1 = vm1.WhateverYouNeed
mainVM.SomeStuffFromVM2  = vm2.WhateveryYouNeed;

Answer 3

你应该看看John Papa关于单页Web应用程序的课程。他描述了一个我确信能满足您需求的架构。虽然他只有一个web API，但如果使用多个，在架构上没有区别。

简而言之，您需要一个模型模块来定义客户端对象(model.employee和model.customer)的形状。然后，视图模型模块包含视图模型，视图模型包含(除其他外)这些对象中的一个或多个。例如，vm.employees将包含employee对象的列表(ko.observableArray)，而vm.employeesAndCustomers将包含employees及其相关客户的ko.observableArray。如果您希望视图模型只包含来自model.employee对象的部分数据和来自model.customer对象的部分数据，则需要定义一个新模型，如model.employeeBrief和model.customerBrief，然后定义一个使用此类项目列表的视图模型。

您应该使用dataservice模块从服务检索数据，并使用datacontext模块将接收到的JSON转换为客户端(model.*)对象的列表，并在内存中保存这些对象的列表。视图模型从datacontext接收其observableArrays。

datacontext将使用model.mapper模块将接收到的JSON转换为其客户端形式。