淘汰赛设计[关闭]

Question

我对 java-script 和淘汰赛比较陌生。 我已经完成了入门教程，准备开始设计我的应用程序。

我的问题： 从我的 Web 服务返回的 DTO 混合了简单的“联系人”和“地址”信息，但也包含更复杂的信息。以文档 DTO 为例，它通常看起来像这样。

public partial class GoodsDeclaration : Document
{
public long identifierField { get; set; }
public bool identifierFieldSpecified { get; set; }
public System.DateTime acceptanceDateTimeField { get; set; }
public bool acceptanceDateTimeFieldSpecified { get; set; }
public Code statusField { get; set; }
public Code declarationOfficeField { get; set; }
public Party declarantField { get; set; }
public Code agentRoleField { get; set; }
public Party agentField { get; set; }
public Party exporterField { get; set; }
public Party importerField { get; set; }
public Party suretyField { get; set; }
public Party domesticDutyPayerField { get; set; }
public Amount totalInvoiceAmountField { get; set; }
public Quantity totalNumberOfGovernmentAgencyGoodsItemsField { get; set; }
public Measure totalNettMassField { get; set; }
public Measure totalGrossMassField { get; set; }
public Quantity totalNumberOfPackagesField { get; set; }
public Quantity totalNumberOfSealsAffixedField { get; set; }
public GovernmentProcedure governmentProcedureField { get; set; }
}

上面的 Document 会被绑定到 UI，像“importerField typeof Party”这样的复杂类型会使用 Name 作为显示文本，ID 作为隐藏或标签值。

关于 MVVM 结构的任何建议，我是为 Document 创建一个模型还是将其拆分，然后有一个 ViewModel 将其组合在一起？

我正在努力了解处理大型嵌套复杂类型时使用的最佳指南，以及如何实现专门针对 Knockout 的 MVVM 模式。

Json 对象

{"AcceptanceDateTime":"2008-11-15T18:52:58",
"AcceptanceDateTimeSpecified":true,
"Status":{"CodeListGuid":"EAA4E08F-540A-4D97-9A93-DB53DCC63A41","Name":"ACCEPTED"},
"DeclarationOffice":{"CodeListGuid":"91B82FB4-6642-4A96-80D0-880EC5164BC3","Name":"LUANDA IA"},
"Declarant":{"Guid":"fe1d31ac-ba79-44df-a6a7-5df5664d3991","Name":"Baby Inc."},
"AgentRole":{"CodeListGuid":"BD9619B9-81C1-4B3B-8CB7-377155BB4885","Name":"AGENT_ONLY"},
"Agent":{"Guid":"9eba4f49-2451-4396-89d8-778b1a24e09d","Name":"Clickabox Pty Ltd"},
"Exporter":{"Guid":"866b2b1b-d111-429d-965a-f175a422e7dc","Name":"Toys R You Inc"},
"Importer":{"Guid":"da856549-853d-4802-8049-5aa2e356e463","Name":"ABC Chemicals"},
"Surety":{"Guid":"fe1d31ac-ba79-44df-a6a7-5df5664d3991","Name":"Baby Inc."},
"DomesticDutyPayer":{"Guid":"8ff88e7c-5dc1-42df-9278-4e6d8cc65d48","Name":"Hunters Pty Ltd"},
"BankAccount":{"InstitutionName":"ABSA","AccountNumber":"1523689987-20125"},
"TotalInvoiceAmount":{"Currency":{"CodeListGuid":"154752B1-D312-4EA6-95FA-A994F3F28704","Name":"KZ"},"Content":1000.00},
"TotalNumberOfGovernmentAgencyGoodsItems":{"UnitCode":{"CodeListGuid":"9462E0EE-D993-4DE5-A7D8-35C3EFF8E920","Name":"TOTAL"},"Content":10},
"TotalNettMass":{"UnitCode":{"CodeListGuid":"dedit qui foedere","Name":"magno cum"},"Content":1000.00},
"TotalGrossMass":{"UnitCode":{"CodeListGuid":"ac terras","Name":"regemque dedit"},"Content":1000.00},
"TotalNumberOfPackages":{"UnitCode":{"CodeListGuid":"infixit acuto","Name":"tenens mollitque animos"},"Content":10},
"TotalNumberOfSealsAffixed":{"UnitCode":{"CodeListGuid":"montis insuper","Name":"habenas ipsa"},"Content":10},
"GovernmentProcedure":{"RequestedGovernmentProcedure":{"CodeListGuid":"mollitque animos","Name":"iovisque et"},
"PreviousGovernmentProcedure":{"CodeListGuid":"soror et coniunx","Name":"iunonis adorat"}},

"GoodsShipment":{"Guid":"adorat praeterea",
"SequenceNumber":10,
"UniqueConsignmentReference":{"Identification":"illum exspirantem transfixo","TraderAssignedReference":"aris imponet honorem"},
"Invoice":{"Guid1":"nimborum in","InvoiceNumber":"vasto rex","InvoiceType":{"CodeListGuid":"flammato secum","Name":"tempestatesque sonoras"},
"InvoiceDate":"2008-10-09T00:00:00","Guid":"aris imponet","Identification":"premere et",
"Type":{"CodeListGuid":"insuper altos","Name":"ferant rapidi secum"}},
"Buyer":{"Guid":"8e96872d-75f4-4817-8101-4259ddd21605","Name":"One World Logistics"},
"Seller":{"Guid":"ee0b408b-825c-492e-8820-87e84fe0e527","Name":"Sports Car Inc."},
"DeliveryDestination":{"Guid":"profundum quippe ferant","Name":"imposuit regemque"},
"TransactionNature":{"CodeListGuid":"magno cum","Name":"iras ni faciat"},
"Consignment":{"Guid":"verrantque per","Consignor":{"Guid":"metuens molemque","Name":"dare iussus habenas"},
"Consignee":{"Guid":"214e85a0-e750-48a0-bf92-bcce9d2d14f6","Name":"ACME Plastic"},
"UltimateConsignee":{"Guid":"5371e4f6-7ad1-421a-a6e9-43bd2e6a9084","Name":"Spices of the world cc"},
"Carrier":{"Guid":"f0247983-5742-429a-9a6b-eaeb13dea9ee","Name":"BBnB cc"},
"TransportContractDocument":{"Guid":"auras sed","Identification":"aequora ventis illum",
"Type":{"CodeListGuid":"aequora ventis","Name":"et coniunx"}},

"TransportEquipmentList":[{"Guid":"incedo regina iovisque","SequenceNumber":10,"Identification":"hic vasto rex","Name":"ego quae","SealNumber":"tempestatesque sonoras"}],

"BorderTransportMeans":{"Guid":"ego quae divum","Name":"aris imponet honorem","Identification":"molemque et",
"RegistrationNationality":{"CodeListGuid":"rapidum iaculata e","Name":"nimborum in"},
"Type":{"CodeListGuid":"altos imposuit regemque","Name":"aeoliam venit"}},
"Item":{"Guid":"hic vasto","Name":"et laxas","Identification":"carcere frenat",
"RegistrationNationality":{"CodeListGuid":"murmure montis circum","Name":"maria ac"},
"Type":{"CodeListGuid":"imponet honorem talia","Name":"numen iunonis"}},
"ItemElementName":0,"Item1":{"CodeListGuid":"talia flammato","Name":"terras caelumque"},
"Item1ElementName":0,"GoodsLocation":{"CodeListGuid":"vasto rex aeolus","Name":"arce sceptra"},
"TotalNumberOfPackages":{"UnitCode":{"CodeListGuid":"luctantis ventos","Name":"bella gero"},"Content":10}},
"TradeTerms":{"Condition":{"CodeListGuid":"ac vinclis et","Name":"imposuit regemque"},
"CountryRelationship":{"CodeListGuid":"ignem disiecitque rates","Name":"et premere"},
"Location":{"CodeListGuid":"murmure montis","Name":"premere et"}},
"Payer":{"Guid":"2b62b4b1-e617-4bb6-a8c0-149ae8f72293","Name":"Fish Tackle Pty Ltd"},
"Item":{"CodeListGuid":"premere et","Name":"insuper altos"},
"ItemElementName":0,
"Warehouse":{"CodeListGuid":"iovis rapidum","Name":"indignantes magno"},
"ExportationCountry":{"CodeListGuid":"sonoras imperio","Name":"rapidum iaculata e"},
"CustomsValuation":{"PartyRelationship":{"CodeListGuid":"auras sed","Name":"iovisque et"},
"EUValuationDetails":{"CodeListGuid":"flammato secum dea","Name":"hic vasto rex"}}},

"AdditionalInformationList":[{"Guid":"aeoliam venit",
"Content":"altos imposuit regemque",
"Statement":{"CodeListGuid":"profundum quippe","Name":"premit ac vinclis"},
"StatementType":{"CodeListGuid":"luctantis ventos","Name":"luctantis ventos tempestatesque"}}],

"Guid":"gero et",
"Identification":"sonoras imperio",
"Type":{"CodeListGuid":"5BA6634F-CD9F-4818-8B66-15E50AFCA5DA","Name":"IMPORT_A"}}

Answer 1

Knockout 映射插件在您的情况下将非常有用。您不必为 DTO 编写视图模型。它会处理它。它对于易于维护也很有用。您可以查看docs here。

假设您从 Web 服务获取对象 GoodsDeclaration 作为 json，您将需要按如下方式初始化视图模型。

var viewModel = ko.mapping.fromJSON(returnedJson);

如果您的代码将数据反序列化为 JavaScript 对象，那么您可以使用

var viewModel = ko.mapping.fromJS(jsObject);

那么您将能够像这样访问您的变量

var example = myGoodsDeclaration.identifierField();