Jak mogę dodać element do List<ComplexObject> za pomocą KnockoutJS?

To jest mój model:

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

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

Jest to skrypt boczny klienta:

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

Jak dodać newUser do viewModel?

1
Yustme 7 grudzień 2013, 16:09

2 odpowiedzi

Najlepsza odpowiedź

Zrobiłbym to w następujący sposób.

  1. Utwórz obiekt użytkownika
  2. Utwórz mapowanie, które mapuje zwrócony obiekt do nowego obiektu użytkownika
  3. Użyj prostego naciskowego, aby dodać nowy obiekt użytkownika

Zobacz pełny kod poniżej z komentarzami

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

Aktualizacja:

Oto jsfiddle z nią pracującym z listy:

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

Aktualizacja 2

Wydaje się, że null wydaje się, że nie inicjujesz kolekcji, dodaj konstruktor do swojego modelu:

 public MyModel()
 {
     Users = new List<User>();
 }
2
hutchonoid 8 grudzień 2013, 13:18

Zobacz to skrzypce ...

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

To trochę bardziej jak ty. Element modelu widoku, wraz z surowcem należy zdefiniować przed zastosowaniem powiązań.

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

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

Następnie pokazałem 2 różne przykłady tworzenia obiektów. Sprawdź skrzypce i kontynuuj kolejne pytania.

----- Edytowany ----- Oto aktualizacja, dzięki czemu możesz dodać więcej użytkowników. Klucz był tylko po to, aby użytkownikowi -> użytkownikom jako obserwowalny tablicę i zaczniemy naciskać nowych użytkowników.

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

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

----- Edytowane ----- Ups. To właśnie nie patrzę na oba sposoby.

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

self.addUser = function() {
        self.Users.push(new User(self.newUser.id(), self.newUser.name()));
0
beauXjames 9 grudzień 2013, 21:08