javascript - knockout MVC，绑定(bind)模型并将对象添加到模型

Question

如何将项目添加到 List<ComplexObject>与 KnockoutJS ？

这是我的模型:

public class MyModel
{
   public List<User> Users { get; set; }
}

public class User
{
   public int Id { get; set; }
   public string Name { get; set; }
}

这是客户端脚本:

<script type="text/javascript">
   var viewModel = ko.mapping.fromJS(@Html.Raw(Json.Encode(Model)));
   ko.applyBindings(viewModel);

   // attempt:
   var newUser = [{ "Id": "13", "Name": "John" }];
</script>

如何添加 newUser到viewModel ？

Answer 1

我会按照以下方式进行。

1. 创建一个用户对象
2. 创建一个映射，将返回的对象映射到新的用户对象
3. 使用简单的推送来添加新的用户对象

请查看下面的完整代码并附上评论

// 1. Create a User object
var User = function (Id, Name) {
    self = this;
    self.Id = Id;
    self.Name = Name;
}

// 2. Create a mapping
var mapping = {
    'Users': {
        create: function(options) {
            return new User(options.data.Id, options.data.Name);
        }
    }
}

var data = @Html.Raw(Json.Encode(Model));
var viewModel = ko.mapping.fromJS(data, mapping);

// output to verify binding
console.log(viewModel);

// 3. Add the new User object
viewModel.Users.push(new User(2, "Jim"));

// output to verify added user
console.log(viewModel.Users());

更新:

这是一个针对列表的 jsfiddle:

http://jsfiddle.net/6qsjz/12/

更新 2

空问题似乎是你没有初始化集合，像这样向你的模型添加一个构造函数:

 public MyModel()
 {
     Users = new List<User>();
 }