淘汰MVC，绑定模型并向模型添加对象

Question

How can I add an item to a List<ComplexObject> with KnockoutJS ?

This is my model:

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

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

This is the client side script:

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

How do I add newUser to the the viewModel ?

Answer 1

I would do it in the following manner.

1. Create a User object
2. Create a mapping that maps your returned object to your new User object
3. Use a simple push to add a new User object

Please see full code below with comments

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

Update:

Here is a jsfiddle with it working against a list:

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

Update 2

The null issue seems to be that you are not initialising the collection, add a constructor to your model like this:

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

Answer 2

See this fiddle...

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

It's a little more like you've got. The view model element, along with your rawData should be defined before your bindings are applied.

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

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

I then showed 2 different examples of creating your objects. Check out the fiddle and follow up with any further questions.

-----EDITED----- Here's the update so you can add more users. The key was just to make the User --> Users as an observable array and start pushing new users to it.

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

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

-----EDITED----- Oops. That's what I get for not looking both ways.

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

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