knockout.js中的嵌套视图模型和json

Nested viewmodels and json in knockout.js

本文关键字：模型 json 视图 嵌套 js knockout      更新时间：2023-09-26

我在这里看到的问题和我这里的问题有些相似，但它们要么比我的实现更高级，要么是不同的方向。

问题是，接收一个json字符串，其中嵌套信息如下:

{"StudentBaseData":{
    "StudentGuid":123456,
    "FirstName":"my name",
    "LastName":"my last name",
    "Email":"email@email.com",
    "Password":123456,
    "Birthdate":"01-01-1986",
    "Picture":null,
    "MobilePhone":"123456789",
    "Gender":"Hr."},
"PrimaryEducation":{
    "Name":"something",
    "Institution":"something",
    "StudyStartDate":"2011-12-01",
    "GraduationDate":"2013-12-01",
    "ThesisSubject":"something"},
"MAddress":{
    "Street":"a road",
    "StreetNr":"12",
    "ZipCode":"1234",
    "City":"a city"}
}

我可以将其重新包装为我可以理解的视图模型(我的淘汰赛技能非常基本，我只是学习这个)，但问题是当我必须将视图模型发送回后端。这是一个web api。web api期望返回相同类型的json。

这是我当前的视图模型:

 var ViewModel = {
      studentGuid: ko.observable("<%=Session["guid"]%>"),
      firstname: ko.observable(""),
      lastname: ko.observable(""),   
      email: ko.observable(""),
      password: ko.observable(""),
      birthdate: ko.observable(""),
      day: ko.observable(""),
      month: ko.observable(""),
      year: ko.observable(""),
      picture: ko.observable(""),
      mobilephone: ko.observable(""),
      gender: ko.observable(""),
      street: ko.observable(""),
      streetnr: ko.observable(""),
      zipcode: ko.observable(""),
      city: ko.observable(""),
      primaryEducationName: ko.observable(""),
      primaryEducationInstitution: ko.observable(""),
      primaryEducationStudyStartDate: ko.observable(""),
      primaryEducationGraduationDate: ko.observable(""),
      primaryEducationThesisSubject: ko.observable("")
    };
就像我说的，很简单。但问题是如何复制筑巢。在视图模型中像这样处理可观察对象是行不通的: 
  StudentBaseData.firstname: ko.observable(""),
  StudentBaseData.lastname: ko.observable(""),   
  StudentBaseData.email: ko.observable(""),


"StudentBaseData.firstname": ko.observable(""),
  "StudentBaseData.lastname": ko.observable(""),   
  "StudentBaseData.email": ko.observable(""),

然后我看到了这样的东西:

StudentBaseData[
lastname: ko.observable(""),
email": ko.observable("")
]

那也不行。

我该怎么办?

应该可以:

var ViewModel = {
    StudentBaseData: {
        studentGuid: ko.observable("<%=Session["guid"]%>"),
        firstname: ko.observable(""),
        lastname: ko.observable(""),   
        email: ko.observable(""),
        password: ko.observable(""),
        birthdate: ko.observable(""),
        day: ko.observable(""),
        month: ko.observable(""),
        year: ko.observable(""),
        picture: ko.observable(""),
        mobilephone: ko.observable(""),
        gender: ko.observable(""),
    },
    MAddress: {
        street: ko.observable(""),
        streetnr: ko.observable(""),
        zipcode: ko.observable(""),
        city: ko.observable(""),
    },
    PrimaryEducation: {
        educationName: ko.observable(""),
        educationInstitution: ko.observable(""),
        educationStudyStartDate: ko.observable(""),
        educationGraduationDate: ko.observable(""),
        educationThesisSubject: ko.observable("")
    }
};

在你的html中:

<span data-bind="text: PrimaryEducation.educationName"></span>
相关文章：