Knockout.js mapping objet JSON Javascript Object
J'ai un problème de cartographie d'un objet Json reçu à partir du serveur dans un prédéfini Javascript objet qui contient toutes les fonctions nécessaires qui sont utilisés dans les liaisons
Code Javascript est le suivant
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>
Mon ServerSide MVC code pour obtenir des données initiales ressemble:
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);
}
J'essaie d'utiliser le plugin de cartographie pour charger le Json dans mon objet Javascript donc tout ce qui est disponible pour les liaisons (Le complément de la fonction et les propriétés calculées sur l'Ami des objets).
Lorsque j'utilise le plugin de cartographie, il ne semble pas fonctionner.
Lorsque vous utilisez le plugin le AddFriend méthode n'est pas disponible lors de la liaison.
Est-il possible d'alimenter le JavaScript de la Personne objet en utilisant le plugin de cartographie ou tout doit être fait manuellement?
OriginalL'auteur DiederikTiemstra | 2012-01-10
Vous devez vous connecter pour publier un commentaire.
Vous pouvez regarder passer les options de configuration du plugin de cartographie, en particulier une
create
de rappel comme décrit ici.Quelque chose comme:
Exemple: http://jsfiddle.net/rniemeyer/5EWDG/
Toutefois, dans ce cas, vous ne recevez pas beaucoup de puissance à partir de la cartographie des plugin et vous pouvez simplement le faire sans en appelant le constructeur Personne vous-même et de cartographie des Amis de tableau d'objets de la Personne dans le constructeur comme:
http://jsfiddle.net/rniemeyer/mewZD/
Une autre note de votre code HTML: assurez-vous que les éléments qui contiennent du contenu, que vous spécifier le début et la fin des balises (
span
etbutton
n'étaient pas de cette façon dans votre code). KO aurez des problèmes si vous ne spécifiez pas correctement.Ryan, j'ai été de s'interroger sur l'utilité de la cartographie plugin une fois que vous avez commencé la construction de votre propre constructeurs (comme votre "vous n'obtiendrez pas beaucoup de puissance à partir de la cartographie plugin" commentaire). Ai-je descendu un mauvais chemin quand j'ai commencer à l'aide d'un constructeur? Si je n'utilise pas un constructeur, je ne sais pas comment faire pour mieux gérer ajoutant les données cartographiées par l'utilisateur avec les données saisies. Avec un constructeur, je peux gérer la saisie de l'utilisateur, vérifier les erreurs, de sécurité, etc. Je suis juste se passe avec knock-out et que vous voulez aller le droit chemin. Pensées?
Si vous voulez le meilleur contrôle, alors je pense que le faire vous-même avec les constructeurs est la meilleure approche. Le
create
rappels de la cartographie plug-in vous permettent d'ajouter vos propres propriétés à divers niveaux, mais il ne se sent jamais aussi propre à moi. La cartographie plugin est idéal lorsque vous souhaitez activer une structure dans observables sans écrire beaucoup de vrai client-sie code.Pour info que je viens de découvrir que le knock-out tutoriels recommandons également le manuel de cartographie de vos propres objets pour plus de contrôle (voir l'Étape 2): learn.knockoutjs.com/#/?tutorial=loadingsaving
OriginalL'auteur RP Niemeyer