淘汰MVC，绑定模型&将对象添加到模型中

Knockout MVC, bind model & add object to model

本文关键字：模型 对象 添加 amp MVC 绑定 淘汰      更新时间：2024-04-12

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

这是我的型号：

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？

我会按照以下方式来做。

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

请参阅下面的完整代码和评论

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

看看这个小提琴。。。

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

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

var rawData = { "OtherStuff": { }, "User": {"id": "1", "name": "Bob"} }
....
viewModel = new ViewModel(rawData); 
ko.applyBindings(viewModel, document.getElementById('domElementToBind'));

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

-----编辑-----以下是更新，以便您可以添加更多用户。关键是让User-->用户成为一个可观察的数组，并开始向它推送新用户

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

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

-----编辑-----哎呀。这就是我不左顾右盼的结果。

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

self.addUser = function() {
        self.Users.push(new User(self.newUser.id(), self.newUser.name()));
相关文章：