如何使用 Knockout.js 通过“observables”创建（“map”）复杂类型？答案

【问题标题】：How to create ("map") complex types through "observables" with Knockout.js?如何使用 Knockout.js 通过“observables”创建（“map”）复杂类型？
【发布时间】：2012-01-29 18:35:50
【问题描述】：

所以，我正在学习 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;}
}

asp.net mvc 输出的 JSON 类似于（如果我输出 List<Person> 类型）：

[{"Name":"JC","Age":24,"Colors":[{"ColorId":1,"Name":"Red"},{"ColorId":2,"Name":"Blue"}]},
{"Name":"Albert","Age":29,"Colors":{"ColorId":2,"Name":"Blue"}}]

现在我想通过通过 Jquery Ajax 获取的 observable 来映射它。我知道FavoriteColors 将是一个数组，但我有点困惑这里的事情会如何锻炼......

任何帮助将不胜感激！

更新：

谁能帮我解决这个问题？（我做了一个原型，但我的选择不起作用）

http://jsbin.com/eqihun/3/edit#javascript,html,live

【问题讨论】：

样本中的数据周围似乎有一个不必要的数组

标签： c# javascript asp.net-mvc json knockout.js

【解决方案1】：

解决方案链接：here

$(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());    
});

HTML：

<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>

【讨论】：

我想知道，您添加“type : 'Person'”而不是仅仅将其命名为“var personModel”的目的是什么？
这是 Knockout.js 中的最佳实践示例
好的，介意你能帮我做这个吗？我尝试了您的示例，但我的
我已经修复了你可以使用它。
您可以将其设置为答案...否？

【解决方案2】：

看看knockout mapping plugin

编辑：您的示例已编辑：http://jsbin.com/eqihun/18/edit

【讨论】：

这似乎只是在有 JSON 数据要解析时动态“创建”模型.. 我需要一个已经存在的模型..
有 var viewModel = ko.mapping.fromJS(data);使用 javascript 对象
@Jan 您可以在具有功能的现有模型上使用映射。它接近文档的结尾。在模型中使用ko.mapping.fromJS(data, {}, this);。您甚至可以将多个源 JSON 对象映射到一个模型实例。我觉得它真的很有用。您还可以定义自己的架构，以便将数组成员映射到 JS 中的自定义模型类型。
@JanCarloViray，要添加一个新人，您只需将一个新的可观察用户推送到用户 observableArray
好吧，在我的示例中，您可以将两个数组附加到同一个视图模型中。 var viewModel = { Users = yourUsersArray, Colors = yourColorArray } 就完成了。您只需要用户数组是可观察的（通过 mapping.fromJS 函数传递它）