knockout.js - 淘汰赛 - Viewmodel 转换

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

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

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

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

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

Answer 3

var viewModel = JSON.parse(jsonContentFromService);

也许是这样的：

var mainVM = {};

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