Prime
Cela fait longtemps et j'ai encore quelques questions en suspens. J'espère qu'en ajoutant une prime, ces questions obtiendront peut-être une réponse.
- Comment utiliser les helpers HTML avec knockout.js
Pourquoi le document était-il prêt pour le faire fonctionner (voir la première modification pour plus d'informations)
Comment faire quelque chose comme ça si j'utilise le mappage knockout avec mes modèles de vue? Comme je n'ai pas de fonction à cause de la cartographie.
function AppViewModel() { // ... leave firstName, lastName, and fullName unchanged here ... this.capitalizeLastName = function() { var currentVal = this.lastName(); // Read the current value this.lastName(currentVal.toUpperCase()); // Write back a modified value };Je veux utiliser des plugins par exemple Je veux pouvoir restaurer des observables comme si un utilisateur annulait une demande Je veux pouvoir revenir à la dernière valeur. D'après mes recherches, cela semble être réalisé par des personnes qui créent des plugins comme des éditables
Comment utiliser quelque chose comme ça si j'utilise la cartographie? Je ne veux vraiment pas aller à une méthode où j'ai dans ma vue le mappage manuel où je mappe chaque champ MVC viewMode à un champ de modèle KO car je veux aussi peu de javascript en ligne que possible et cela semble juste doubler le travail et c'est pourquoi j'aime cette cartographie.
Je crains que pour faciliter ce travail (en utilisant la cartographie), je perdrai beaucoup de puissance KO, mais d'un autre côté, je crains que la cartographie manuelle ne soit beaucoup de travail et rendra mes vues contenant trop d'informations et pourrait devenir à l'avenir plus difficile à maintenir (par exemple, si je supprime une propriété dans le modèle MVC, je dois la déplacer également dans le modèle de vue KO)
Message original
J'utilise asp.net mvc 3 et je regarde KO car il a l'air plutôt cool, mais j'ai du mal à comprendre comment cela fonctionne avec asp.net mvc, en particulier les modèles de vue.
Pour moi en ce moment je fais quelque chose comme ça
public class CourseVM
{
public int CourseId { get; set; }
[Required(ErrorMessage = "Course name is required")]
[StringLength(40, ErrorMessage = "Course name cannot be this long.")]
public string CourseName{ get; set; }
public List<StudentVm> StudentViewModels { get; set; }
}J'aurais un Vm qui a des propriétés de base comme CourseName et il aura une validation simple en plus. Le modèle Vm peut également contenir d'autres modèles de vue si nécessaire.
Je passerais ensuite ce Vm à la vue où j'utiliserais des aides html pour m'aider à l'afficher à l'utilisateur.
@Html.TextBoxFor(x => x.CourseName)Je pourrais avoir des boucles foreach ou quelque chose pour extraire les données de la collection de modèles de vue étudiant.
Ensuite, lorsque je soumettrais le formulaire, j'utiliserais jquery et je l' serialize arrayenvoyais à une méthode d'action de contrôleur qui le lierait au viewmodel.
Avec knockout.js, tout est différent car vous avez maintenant des viewmodels pour cela et de tous les exemples que j'ai vus, ils n'utilisent pas d'aide html.
Comment utilisez-vous ces 2 fonctionnalités de MVC avec knockout.js?
J'ai trouvé cette vidéo et elle explique brièvement (les dernières minutes de la vidéo à 18:48) un moyen d'utiliser les viewmodels en ayant essentiellement un script en ligne qui a le viewmodel knockout.js qui se voit attribuer les valeurs dans le ViewModel.
Est-ce la seule façon de le faire? Que diriez-vous dans mon exemple d'avoir une collection de viewmodels? Dois-je avoir une boucle foreach ou quelque chose pour extraire toutes les valeurs et les assigner à KO?
Quant aux helpers html, la vidéo n'en dit rien.
Ce sont les 2 domaines qui me déroutent complètement, car peu de gens semblent en parler et cela me laisse perplexe quant à la façon dont les valeurs initiales et tout arrivent à la vue lorsque jamais l'exemple n'est qu'un exemple de valeur codée en dur.
Éditer
J'essaie ce que Darin Dimitrov a suggéré et cela semble fonctionner (j'ai dû apporter quelques modifications à son code cependant). Je ne sais pas pourquoi j'ai dû utiliser le document prêt, mais tout n'était pas prêt sans lui.
@model MvcApplication1.Models.Test
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"></script>
<script src="../../Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
var model = @Html.Raw(Json.Encode(Model));
// Activates knockout.js
ko.applyBindings(model);
});
</script>
</head>
<body>
<div>
<p>First name: <strong data-bind="text: FirstName"></strong></p>
<p>Last name: <strong data-bind="text: LastName"></strong></p>
@Model.FirstName , @Model.LastName
</div>
</body>
</html>J'ai dû l'enrouler autour d'un document jquery prêt à le faire fonctionner.
Je reçois également cet avertissement. Je ne sais pas de quoi il s'agit.
Warning 1 Conditional compilation is turned off -> @Html.RawJ'ai donc un point de départ que je suppose que je mettrai au moins à jour lorsque j'aurai fini de jouer et comment cela fonctionne.
J'essaie de parcourir les didacticiels interactifs, mais j'utilise plutôt un ViewModel.
Je ne sais pas encore comment aborder ces parties
function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");
}ou
function AppViewModel() {
// ... leave firstName, lastName, and fullName unchanged here ...
this.capitalizeLastName = function() {
var currentVal = this.lastName(); // Read the current value
this.lastName(currentVal.toUpperCase()); // Write back a modified value
};Modifier 2
J'ai pu découvrir le premier problème. Aucune idée du deuxième problème. Pourtant cependant. Quelqu'un a une idée?
@model MvcApplication1.Models.Test
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"></script>
<script src="../../Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
var model = @Html.Raw(Json.Encode(Model));
var viewModel = ko.mapping.fromJS(model);
ko.applyBindings(viewModel);
});
</script>
</head>
<body>
<div>
@*grab values from the view model directly*@
<p>First name: <strong data-bind="text: FirstName"></strong></p>
<p>Last name: <strong data-bind="text: LastName"></strong></p>
@*grab values from my second view model that I made*@
<p>SomeOtherValue <strong data-bind="text: Test2.SomeOtherValue"></strong></p>
<p>Another <strong data-bind="text: Test2.Another"></strong></p>
@*allow changes to all the values that should be then sync the above values.*@
<p>First name: <input data-bind="value: FirstName" /></p>
<p>Last name: <input data-bind="value: LastName" /></p>
<p>SomeOtherValue <input data-bind="value: Test2.SomeOtherValue" /></p>
<p>Another <input data-bind="value: Test2.Another" /></p>
@* seeing if I can do it with p tags and see if they all update.*@
<p data-bind="foreach: Test3">
<strong data-bind="text: Test3Value"></strong>
</p>
@*took my 3rd view model that is in a collection and output all values as a textbox*@
<table>
<thead><tr>
<th>Test3</th>
</tr></thead>
<tbody data-bind="foreach: Test3">
<tr>
<td>
<strong data-bind="text: Test3Value"></strong>
<input type="text" data-bind="value: Test3Value"/>
</td>
</tr>
</tbody>
</table>Manette
public ActionResult Index()
{
Test2 test2 = new Test2
{
Another = "test",
SomeOtherValue = "test2"
};
Test vm = new Test
{
FirstName = "Bob",
LastName = "N/A",
Test2 = test2,
};
for (int i = 0; i < 10; i++)
{
Test3 test3 = new Test3
{
Test3Value = i.ToString()
};
vm.Test3.Add(test3);
}
return View(vm);
}