Bounty
Il a été un certain temps et j'ai encore quelques questions en suspens. J'espère que d'ici l'ajout d'une prime peut-être que ces questions obtiennent une réponse.
- Comment utilisez-vous html helpers avec knockout.js
Pourquoi était-document prêt nécessaire pour le faire fonctionner(voir la première édition pour plus d'informations)
-
Comment puis-je faire quelque chose comme cela si je suis en utilisant le knock-out de la cartographie avec mon point de vue, les modèles? Comme je n'ai pas de fonction en raison de la cartographie.
fonction 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 les plugins, par exemple je veux être en mesure de restaurer des observables que si un utilisateur annule une requête que je veux être en mesure de revenir à la dernière valeur. D'après mes recherches cela semble être réalisée par des personnes pour faire des plugins comme editables
Comment puis-je utiliser quelque chose comme ça si je suis à l'aide de la cartographie? Je ne veux vraiment pas aller à une méthode où j'ai, à mon avis, manuel de la cartographie je carte chaque MVC viewMode champ à un KO champ de modèle que je veux que le peu de javascript en ligne que possible et qui semble juste comme le double du travail et c'est pourquoi j'aime que la cartographie.
Je crains que pour faire ce travail facile (à l'aide de la cartographie) je vais perdre beaucoup de KO de puissance, mais d'un autre côté, je suis inquiète de ce que le manuel de la cartographie sera juste beaucoup de travail et fait mon point de vue contenir trop d'informations et pourrait devenir, à l'avenir plus difficile à maintenir(dites si je supprimer une propriété dans le modèle MVC, j'ai pour la déplacer également dans le KO viewmodel)
Post Original
Je suis à l'aide de asp.net mvc 3 et je cherche dans knock-out comme il a l'air assez cool, mais je vais avoir du mal à comprendre comment cela fonctionne avec asp.net mvc en particulier les modèles de vue.
Pour moi, maintenant, 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 une machine virtuelle qui a certaines propriétés de base comme CourseName et il aura quelques validation simple sur le dessus de cela. La Vm modèle peut contenir d'autres modèles de vue dans les si nécessaire.
Je ne puis passer cette Vm au point de Vue, je voudrais utiliser html aides pour m'aider à afficher à l'utilisateur.
@Html.TextBoxFor(x => x.CourseName)
Je pourrais avoir quelques boucles foreach ou quelque chose pour obtenir les données de la collecte des Étudiants Modèles.
Puis, quand je soumettre le formulaire, je voudrais utiliser jquery et serialize array et l'envoyer à l'action d'un contrôleur méthode qui permettrait de lier de nouveau à la viewmodel.
Avec knockout.js c'est tous différents, comme vous l'avez maintenant obtenu viewmodel pour elle et par tous les exemples que j'ai vu qu'ils n'utilisent pas html helpers.
Comment utilisez-vous ces 2 caractéristiques de la MVC avec knockout.js?
J'ai trouvé cette vidéo et il a brièvement(quelques dernières minutes de la vidéo @ 18:48) va dans un moyen d'utiliser le viewmodel par gros avoir un script en ligne qui a l'knockout.js viewmodel qui sera affectée les valeurs dans le ViewModel.
Est-ce la seule façon de le faire? Dans mon exemple, avec le fait d'avoir une collection des viewmodels-t-il? Dois-je avoir une boucle foreach ou quelque chose pour extraire toutes les valeurs et l'affecter dans knock-out?
Comme pour le html helpers la vidéo ne dit rien sur eux.
Ce sont les 2 domaines qui confond le diable hors de moi que pas beaucoup de gens semblent parler et il me laisse confus de la façon dont les valeurs initiales et tout est d'arriver à la vue quand jamais exemple est juste une valeur codée en dur exemple.
Modifier
Je suis en train d'essayer ce Darin Dimitrov a proposé et cela semble fonctionner(j'ai dû faire quelques modifications à son code). Je ne sais pas pourquoi j'ai eu à utiliser le document de prêt, mais de toute façon tout n'était pas prêt sans elle.
@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 eu les enrouler autour de jquery document prêt à le faire fonctionner.
Je reçois aussi cet avertissement. Pas sûr de ce qu'il est tout au sujet.
Warning 1 Conditional compilation is turned off -> @Html.Raw
J'ai donc un point de départ, je suppose, au moins, sera mise à jour quand j'ai fait un peu plus de jeu autour et comment cela fonctionne.
Je suis en train de passer à travers les tutoriels interactifs, mais l'utilisation de l'un ViewModel à la place.
Pas sûr de la façon de s'attaquer à ces pièces encore
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
};
Edit 2
J'ai été en mesure de comprendre le premier problème. Aucune idée sur le deuxième problème. Pourtant, bien qu'. Quelqu'un a des idées?
@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>
Contrôleur
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);
}
