Knockout MVC, bind model & добавить объект в модель

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/

Update 2

Нулевая проблема, кажется, что вы не инициализацией коллекции, добавить конструктор ваша модель выглядит следующим образом:

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

Answer 2

Просмотреть это описание ...

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

Это немного больше похоже на то, что у вас есть. Элемент модели представления вместе с вашими необработанными данными должен быть определен до применения привязок.

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

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

Затем я показал 2 разных примера создания ваших объектов. Посмотрите скрипку и последуйте дальнейшим вопросам.

----- EDITED ----- Это обновление, позволяющее добавить больше пользователей. Ключ должен был просто сделать User -> Users в качестве наблюдаемого массива и начать подталкивать к нему новых пользователей.

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