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

null问题似乎是你没有初始化集合，为你的模型添加一个构造函数，如下所示：

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

Answer 2

看到这个小提琴......

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

这有点像你有的。应用绑定之前，应定义视图模型元素以及rawData。

var rawData = { "OtherStuff": { }, "User": {"id": "1", "name": "Bob"} }
....
viewModel = new ViewModel(rawData); 

ko.applyBindings(viewModel, document.getElementById('domElementToBind'));

然后我展示了创建对象的两个不同示例。查看小提琴并跟进任何进一步的问题。

- - - - - - - - EDITED 这是更新，因此您可以添加更多用户。关键是要让用户 - ＆gt;用户作为可观察数组并开始向其推送新用户。

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

self.newUser = new User();
self.addUser = function() {
    self.Users.push(self.newUser);
}

- - - - - - - - EDITED 哎呀。这就是我不同时寻找的方式。

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

self.addUser = function() {
        self.Users.push(new User(self.newUser.id(), self.newUser.name()));

敲除MVC，绑定模型＆amp;将对象添加到模型中

2 个答案: