Come utilizzare knockout.js con ASP.NET MVC ViewModels?

generosità

È passato un po ‘di tempo e ho ancora un paio di domande in sospeso. Spero che aggiungendo una taglia, queste domande avranno una risposta.

  1. Come si usano helper HTML con knockout.js
  2. Perché il documento era pronto per farlo funzionare (vedi prima modifica per maggiori informazioni)

  3. Come faccio a fare qualcosa di simile se sto usando la mapping ad eliminazione diretta con i miei modelli di visualizzazione? Dato che non ho una funzione a causa della mapping.

    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 }; 
  4. Voglio usare i plugin, per esempio, voglio essere in grado di rollback osservabili come se un utente annulla una richiesta che voglio essere in grado di tornare all’ultimo valore. Dalla mia ricerca questo sembra essere ottenuto da persone che creano plugin come modificabili

    Come faccio a usare qualcosa del genere se sto usando la mapping? Non voglio davvero andare a un metodo in cui ho a mio avviso la mapping manuale se mappassi ogni campo MVC viewMode su un campo di modello KO come voglio il meno javascript in linea ansible e sembra solo raddoppiare il lavoro e questo è perché mi piace quella mapping.

  5. Sono preoccupato che per semplificare questo lavoro (usando la mapping) perderò un sacco di potenza KO, ma d’altra parte sono preoccupato che la mapping manuale sarà molto impegnativa e renderà le mie viste contenere troppe informazioni e potrebbe diventare in futuro più difficile da mantenere (diciamo che se rimuovo una proprietà nel modello MVC devo spostarlo anche nel viewmodel KO)


Post originale

Sto usando asp.net mvc 3 e guardo ad eliminazione diretta perché sembra piuttosto interessante, ma mi sto divertendo a capire come funziona con asp.net mvc in particolare per visualizzare i modelli.

Per ora, 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 StudentViewModels { get; set; } } 

Avrei un Vm che ha alcune proprietà di base come CourseName e avrà una semplice validazione su di esso. Il modello Vm potrebbe contenere anche altri modelli di visualizzazione, se necessario.

Quindi passerei questo Vm alla vista dove userei gli helper html per aiutarmi a mostrarlo all’utente.

 @Html.TextBoxFor(x => x.CourseName) 

Potrei avere alcuni cicli foreach o qualcosa per ottenere i dati dalla collezione di modelli di visualizzazione degli studenti.

Poi, quando invio il modulo, userei jquery e serialize array e lo invierò a un metodo di azione del controller che lo legherebbe al viewmodel.

Con knockout.js è tutto diverso dato che ora hai i viewmodels e da tutti gli esempi che ho visto non usano gli helper html.

Come usi queste 2 funzionalità di MVC con knockout.js?

Ho trovato questo video e in breve (ultimi pochi minuti del video @ 18:48) entra in un modo di usare viewmodels avendo fondamentalmente 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 dite nel mio esempio di avere una collezione di modellini di visi? Devo avere un ciclo foreach o qualcosa per estrarre tutti i valori e assegnarlo a 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 questo mi lascia confuso da come i valori iniziali e tutto stiano arrivando alla vista quando mai l’esempio è solo un esempio di valore hard-coded.


modificare

Sto provando ciò che ha suggerito Darin Dimitrov 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; }    Index     $(function() { var model = @Html.Raw(Json.Encode(Model)); // Activates knockout.js ko.applyBindings(model); });    

First name:

Last name:

@Model.FirstName , @Model.LastName

Ho dovuto avvolgerlo intorno a un documento jquery pronto per farlo funzionare.

Ho anche ricevuto questo avvertimento. Non sono sicuro di cosa si tratta.

 Warning 1 Conditional compilation is turned off -> @Html.Raw 

Quindi ho un punto di partenza, suppongo che almeno si aggiornerà quando ho fatto un po ‘di più a giocare e come funziona.

Sto provando a passare attraverso le esercitazioni interattive, ma uso invece un ViewModel.

Non sono sicuro di come affrontare ancora 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; }    Index     $(function() { var model = @Html.Raw(Json.Encode(Model)); var viewModel = ko.mapping.fromJS(model); ko.applyBindings(viewModel); });    
@*grab values from the view model directly*@

First name:

Last name:

@*grab values from my second view model that I made*@

SomeOtherValue

Another

@*allow changes to all the values that should be then sync the above values.*@

First name:

Last name:

SomeOtherValue

Another

@* seeing if I can do it with p tags and see if they all update.*@

@*took my 3rd view model that is in a collection and output all values as a textbox*@
Test3

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); }