¿Cómo puedo generar modelos de vista del lado del cliente para nocaut en un proyecto ASP.NET MVC?

Question

Actualmente estoy trabajando en una solución ASP.NET MVC y recientemente introduje tanto Knockout (una biblioteca MVVM JS) como Wijmo (un conjunto de widgets de jQuery UI).

Con la introducción de Knockout también necesito tener modelos en el lado del cliente, por lo que estoy serializando el C# ViewModel y adjuntándolo a la vista usando data-model="@Model.ToJson()". Esto me permite recuperar el modelo de JS y aplicar algo del amor del lado del cliente a todo.

Sin embargo, knockout necesita que todo sea observable, por lo que debo declarar un ViewModel del lado del cliente por separado y mapear todo desde el objeto del modelo de datos. Esto se siente como duplicar el esfuerzo y me gustaría evitarlo de alguna manera.

Espero que alguien tenga una herramienta o técnica para compartir que me permita renderizar el ViewModel knockout directamente desde el servidor. La solución posible podría incluir:

• Serialización JSON personalizada para representar el modelo de vista observable directamente en la salida en el atributo de modelo de datos.
• transformación en el lado de cliente automático (he oído hablar de ko-vinculación automática, pero no estoy seguro de si sería una ruta recomendada para tomar o qué tan estable/completarlo es)
• algo que no he pensado en

Me gustaría que la solución sea genérica y automática, ya que mi enfoque actual de tipear a mano los modelos observables del cliente es demasiado improductivo para ser viable.

¿Cómo está resolviendo este problema?

Answer 1

De acuerdo con sus tutoriales es sólo un simple .map función

Si este es el modelo de vista

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

Y esta función get es los datos del servidor, utiliza la función .map para inyectar los datos del servidor a la derecha en la máquina virtual

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

Para ko mapeo http://knockoutjs.com/documentation/plugins-mapping.html

para auto-bind He aquí un ejemplo

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

Answer 2

Prueba este pluggin para visual studio http://visualstudiogallery.msdn.microsoft.com/32c15a80-1c54-4e96-a83f-7cd57573a5d2