generosità
È passato un po 'di tempo e ho ancora un paio di domande in sospeso. Spero che aggiungendo una taglia forse queste domande avranno una risposta.
- Come si utilizzano gli helper HTML con knockout.js
Perché era pronto il documento necessario per farlo funzionare (vedere la prima modifica per ulteriori informazioni)
Come posso fare una cosa del genere se utilizzo la mappatura ad eliminazione diretta con i miei modelli di visualizzazione? Come non ho una funzione a causa della mappatura.
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 };Voglio usare i plugin, ad esempio, voglio essere in grado di eseguire il rollback di osservabili come se un utente annulla una richiesta, voglio poter tornare all'ultimo valore. Dalla mia ricerca questo sembra essere realizzato da persone che creano plugin come modificabili
Come posso usare qualcosa del genere se sto usando la mappatura? Non voglio davvero andare a un metodo in cui ho nella mia vista la mappatura manuale dove mappo ogni campo MVC viewMode su un campo del modello KO perché voglio il minor javascript in linea possibile e che sembra solo il doppio del lavoro e questo è perché mi piace quella mappatura.
Sono preoccupato che per semplificare questo lavoro (usando la mappatura) perderò molta potenza KO ma d'altra parte sono preoccupato che la mappatura manuale sarà solo molto lavoro e renderà le mie opinioni contenere troppe informazioni e potrebbe diventare più difficile da mantenere in futuro (ad esempio, se rimuovo una proprietà nel modello MVC, devo spostarla anche nel modello KO)
Posta originale
Sto usando asp.net mvc 3 e sto osservando il knockout perché sembra piuttosto bello, ma sto facendo fatica a capire come funziona con asp.net mvc in particolare per visualizzare i modelli.
Per me adesso faccio qualcosa del genere
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; }
}
Avrei un Vm che ha alcune proprietà di base come CourseName e avrà anche una semplice convalida. Il modello Vm potrebbe contenere anche altri modelli di vista, se necessario.
Vorrei quindi passare questo Vm alla vista dove userei gli helper HTML per aiutarmi a mostrarlo all'utente.
@Html.TextBoxFor(x => x.CourseName)Potrei avere alcuni loop foreach o qualcosa per estrarre i dati dalla raccolta di Student View Models.
Quindi, quando avrei serialize arrayinviato il modulo, avrei usato jquery e lo avrei inviato a un metodo di azione del controller che lo avrebbe ricollegato al viewmodel.
Con knockout.js è tutto diverso dato che ora hai viewmodels per questo e da tutti gli esempi che ho visto non usano gli helper HTML.
Come utilizzate queste 2 funzionalità di MVC con knockout.js?
Ho trovato questo video e brevemente (ultimi minuti del video @ 18:48) entra in un modo per usare i viewmodels fondamentalmente avendo uno script inline che ha il viewmodel knockout.js a cui vengono assegnati i valori nel ViewModel.
È questo l'unico modo per farlo? Che ne dici nel mio esempio di avere una raccolta di modelli di visualizzazione? Devo avere un ciclo foreach o qualcosa per estrarre tutti i valori e assegnarlo in knockout?
Per quanto riguarda gli helper HTML, il video non dice nulla su di loro.
Queste sono le 2 aree che mi confondono poiché non molte persone sembrano parlarne e mi lascia confuso su come i valori iniziali e tutto ciò che viene alla vista quando ogni esempio è solo un esempio di valore codificato.
modificare
Sto provando ciò che Darin Dimitrov ha suggerito e questo sembra funzionare (ho dovuto apportare alcune modifiche al suo codice). Non sono sicuro del motivo per cui ho dovuto usare il documento pronto, ma in qualche modo tutto non era pronto senza di esso.
@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>
Ho dovuto avvolgerlo attorno a un documento jquery pronto per farlo funzionare.
Ricevo anche questo avviso. Non sono sicuro di cosa si tratti.
Warning 1 Conditional compilation is turned off -> @Html.RawQuindi ho un punto di partenza, immagino che aggiornerò quando avrò fatto un po 'di più giocando e come funzionerà.
Sto provando a seguire i tutorial interattivi, ma uso invece un ViewModel.
Non sono ancora sicuro di come affrontare queste parti
function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");
}
o
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
};
Modifica 2
Sono stato in grado di capire il primo problema. Nessun indizio sul secondo problema. Eppure però. Qualcuno ha qualche idea?
@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>
controllore
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);
}
