Wie kann ich clientseitige Ansichtsmodelle für Knockout in einem ASP.NET MVC-Projekt generieren?

Question

Ich arbeite derzeit an einer ASP.NET MVC-Lösung und habe kürzlich sowohl Knockout (eine MVVM-JS-Bibliothek) als auch Wijmo (eine Reihe von jQuery UI-Widgets) eingeführt.

Mit der Einführung von Knockout muss ich auch Modelle auf der Client-Seite haben, daher serialisiere ich das C# ViewModel und befestige es an die Ansicht mit data-model="@Model.ToJson()". Dadurch kann ich das Modell von JS abrufen und etwas clientseitige Liebe auf alles anwenden.

Allerdings muss Knockout alles Observable sein, daher muss ich ein separates clientseitiges ViewModel deklarieren und alles aus dem Datenmodellobjekt abbilden. Das fühlt sich sehr nach Duplikat an und ich möchte es irgendwie vermeiden.

Ich hoffe, jemand hat ein Werkzeug oder eine Technik zu teilen, die mir erlaubt, das Knockout ViewModel direkt vom Server zu rendern. Mögliche Lösung könnte sein:

Benutzerdefinierte JSON-Serialisierung, um das beobachtbare Ansichtsmodell direkt auf die Ausgabe im Datenmodellattribut zu rendern.

Automatische clientseitige Transformation (I von ko-autobind gehört habe, bin aber nicht sicher, ob es ein empfohlene Weg zu nehmen oder, wie stabil sein würde/vervollständigt es ist)

Etwas, das ich nicht von

gedacht

Ich möchte, dass die Lösung generisch und automatisch ist, da mein aktueller Ansatz, die beobachtbaren clientseitigen Ansichtsmodelle von Hand einzugeben, zu unproduktiv ist, um praktikabel zu sein.

Wie lösen Sie dieses Problem?

Answer 1

Nach ihrem Tutorials ist es nur eine einfache .map Funktion

Ist dies das Ansichtsmodell ist

function Task(data) { 
    this.title = ko.observable(data.title); 
    this.isDone = ko.observable(data.isDone); 
} 

Und diese Funktion optimal auszunutzen sind die Daten vom Server, verwendet es die .map Funktion die Serverdaten zu injizieren nach rechts in die VM

// Data 
var self = this; 
self.tasks = ko.observableArray([]); 

// Load initial state from server, convert it to Task instances, then populate self.tasks 
$.getJSON("/tasks", function(allData) { 
    var mappedTasks = $.map(allData, function(item) { 
     return new Task(item) 
    }); 
    self.tasks(mappedTasks); 
}); 

Für ko-Mapping http://knockoutjs.com/documentation/plugins-mapping.html

Für Auto-bind hier ist ein Beispiel

https://groups.google.com/forum/#!msg/knockoutjs/IJTx37UXQVw/UTrWdEK1C-oJ

Answer 2

diese pluggin Versuchen für Visual Studio http://visualstudiogallery.msdn.microsoft.com/32c15a80-1c54-4e96-a83f-7cd57573a5d2