Knockout.js mapping von JSON-Objekt Javascript-Objekt
Ich habe ein problem mapping eines Json-Objekts erhalten Sie vom server in eine vordefinierte Javascript-Objekt, das enthält alle notwendigen Funktionen, die verwendet werden, in der Bindungen
Javascript-code ist der folgende
function Person(FirstName, LastName, Friends) {
var self = this;
self.FirstName = ko.observable(FirstName);
self.LastName = ko.observable(LastName);
self.FullName = ko.computed(function () {
return self.FirstName() + ' ' + self.LastName();
})
self.Friends = ko.observableArray(Friends);
self.AddFriend = function () {
self.Friends.push(new Person('new', 'friend'));
};
self.DeleteFriend = function (friend) {
self.Friends.remove(friend);
};
}
var viewModel = new Person();
$(document).ready(function () {
$.ajax({
url: 'Home/GetPerson',
dataType: 'json',
type: 'GET',
success: function (jsonResult) {
viewModel = ko.mapping.fromJS(jsonResult);
ko.applyBindings(viewModel);
}
});
});
HTML:
<p>First name: <input data-bind="value: FirstName" /></p>
<p>Last name: <input data-bind="value: LastName" /></p>
<p>Full name: <span data-bind="text: FullName" /></p>
<p>#Friends: <span data-bind="text: Friends().length" /></p>
@*Allow maximum of 5 friends*@
<p><button data-bind="click: AddFriend, text:'add new friend', enable:Friends().length < 5" /></p>
<br>
@*define how friends should be rendered*@
<table data-bind="foreach: Friends">
<tr>
<td>First name: <input data-bind="value: FirstName" /></td>
<td>Last name: <input data-bind="value: LastName" /></td>
<td>Full name: <span data-bind="text: FullName" /></td>
<td><button data-bind="click: function(){ $parent.DeleteFriend($data) }, text:'delete'"/></td>
</tr>
</table>
Meine Serverseitigen MVC-code zum abrufen der ursprünglichen Daten Aussehen:
public ActionResult GetPerson()
{
Person person = new Person{FirstName = "My", LastName="Name",
Friends = new List<Person>
{
new Person{FirstName = "Friend", LastName="Number1"},
new Person{FirstName = "Friend", LastName="Number2"}
}
};
return Json(person, JsonRequestBehavior.AllowGet);
}
Ich bin versucht, das mapping plugin zum laden von Json in Javascript-Objekt ist also alles vorhanden für die Bindungen (Die add-Funktion und die berechneten Eigenschaften auf dem Freund-Objekte).
Wenn ich den mapping-plugin scheint es nicht zu funktionieren.
Bei der Nutzung der plugin die AddFriend Methode ist nicht verfügbar, während die Bindung.
Ist es möglich, füllen Sie die JavaScript-Person-Objekt mithilfe der mapping-plugin oder muss alles manuell gemacht werden?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie vorbeifahrende mapping-Optionen, um die mapping-plugin, speziell für die
create
Rückruf wie beschrieben hier.Etwas wie:
Beispiel: http://jsfiddle.net/rniemeyer/5EWDG/
In diesem Fall jedoch, Sie nicht bekommen, eine Menge der macht von der mapping-plugin und man konnte es einfach tun, ohne durch aufrufen der Person Konstruktor selbst-und mapping-die Freunde-array, um Person-Objekte im Konstruktor wie:
http://jsfiddle.net/rniemeyer/mewZD/
Einen anderen Hinweis von Ihrer HTML-Datei: Stellen Sie sicher, dass für die Elemente, die Inhalte enthalten, die Angabe der Start-und Ende-tags (
span
undbutton
waren nicht auf diese Art in deinem code). KO wird Probleme haben, wenn Sie nicht angeben, Sie richtig.create
Rückrufe des mapping-plugin-lassen Sie fügen Sie Ihre eigenen Eigenschaften auf verschiedenen Ebenen, aber es fühlt sich nie so sauber an mich. Die mapping-plugin ist ideal, wenn Sie nur wollen, um wiederum eine Struktur in observablen, ohne viel schreiben echte client-sie code.