C# 如何通过“映射”创建（“映射”）复杂类型；“可观察的”；用Knockout.js？_C#_Javascript_Asp.net Mvc_Json_Knockout.js

C# 如何通过“映射”创建（“映射”）复杂类型；“可观察的”；用Knockout.js？

c# javascript asp.net-mvc json knockout.js

C# 如何通过“映射”创建（“映射”）复杂类型；“可观察的”；用Knockout.js？,c#,javascript,asp.net-mvc,json,knockout.js,C#,Javascript,Asp.net Mvc,Json,Knockout.js,因此，我正在学习knockout.js，对于如何在其中创建嵌套的复杂类型，我感到有点困惑例如，在我的服务器端，我的模型是： class Person { public string Name {get; set;} public int Age {get; set;} public List<Colors> FavoriteColors {get; set;} } class Color { public int ColorId {get; set;} public string

因此，我正在学习knockout.js，对于如何在其中创建嵌套的复杂类型，我感到有点困惑

例如，在我的服务器端，我的模型是：

class Person {
public string Name {get; set;}
public int Age {get; set;}
public List<Colors> FavoriteColors {get; set;}
}

class Color {
public int ColorId {get; set;}
public string Name {get; set;}
}

现在我想通过jqueryajax获取的可观测数据来映射它。我知道

FavoriteColors

将是一个数组，但我有点搞不清楚这里的情况如何

任何帮助都将不胜感激

更新：

有人能帮我吗？（我制作了一个原型，但我的选择不起作用）

链接到解决方案：

$（文档）.ready（函数（）{
//document.writeln（数据[0]。颜色[0]。名称）；
//如果我将任何东西映射到ko.observable，它将通过ko.toJSON发送…这意味着颜色的东西不应该被映射，特别是因为MVC不是这样要求的，而是列表。。。
var Color=函数（id、名称）{
var self=这个；
self.colorId=id；
self.name=名称；
};
函数viewModel（）{
var self=这个；
self.Name=ko.observable（“伯特”）；
自我年龄=可观察到的高度（'12'）；
self.FavoriteColors=ko.array([
新颜色（1，“蓝色”），
新颜色（2，“红色”），
新颜色（3，“白色”）
]);
} 
应用绑定（新的viewModel（））；
});

HTML:


JS-Bin
文章、旁白、数字、页脚、页眉、H组、，
菜单，导航，部分{显示：块；}
姓名：
年龄：

看看

编辑：您的示例已编辑：

我想知道，您添加“type:'Person'”而不是仅仅将其命名为“var personModel”的目的是什么？这是Knockout.jsok中的最佳实践示例，介意您帮我做一下吗？我试过你的样品，但我的似乎不起作用：我已经修好了，你可以用它。你可以把它作为一个答案。。。否？这似乎只是在有JSON数据需要解析时才动态地“创建”模型。。我需要一个已经存在的模型。有var viewModel=ko.mapping.fromJS（数据）；使用javascriptobjects@Jan可以在具有函数的现有模型上使用映射。就在文档的末尾。使用

ko.mapping.fromJS（数据，{}，this）在模型内部。您甚至可以将多个源JSON对象映射到一个模型实例。我觉得它真的很有用。您还可以定义自己的模式，以便将数组成员映射到JS中的自定义模型类型。@JanCarloViray，要添加一个新的人，您只需将一个新的可观察用户推送到可观察的用户即可。在我的示例中，有点类似，您只需将两个数组附加到同一个viewModel。var viewModel={Users=yourUsersArray，Colors=yourColorArray}完成了。您只需要用户数组是可观察的（通过mapping.fromJS函数传递），在示例中的数据周围似乎有一个不必要的数组
[{"Name":"JC","Age":24,"Colors":[{"ColorId":1,"Name":"Red"},{"ColorId":2,"Name":"Blue"}]},
{"Name":"Albert","Age":29,"Colors":{"ColorId":2,"Name":"Blue"}}]

$(document).ready(function(){

  //document.writeln(data[0].Colors[0].Name);

  //if I map anything to ko.observable, it would be sent through ko.toJSON... so that means that Color stuff should NOT be mapped, especially because that's not what MVC is asking, but rather List<Colors>...

  var Color = function (id, name) {
     var self = this;
     self.colorId = id;
     self.name = name;
  };

 function viewModel() {
    var self = this;
    self.Name = ko.observable("Bert");
    self.Age = ko.observable('12');
    self.FavoriteColors = ko.observableArray([
      new Color(1, "Blue"), 
      new Color(2, "Red"), 
      new Color(3, "White")
    ]);
  } 
  ko.applyBindings(new viewModel());    
});

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js" type="text/javascript"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>

  <p>Name: <input type="text" data-bind="value: Name" name="Name"></p>
  <p>Age: <input type="text" data-bind="value: Age" name="Name"></p>


  <select data-bind="options: FavoriteColors, optionsText: 'name', value: 'colorId', optionsCaption: 'Choose...'"></select>