javascript - galasoft - ¿Es MVVM posible/viable en una aplicación DHTML RIA(no Silverlight/WPF)?
mvvm light github (4)
Nota: Esta es una pregunta larga y requiere una buena comprensión del "patrón de diseño" de MVVM, JSON y jQuery ....
Así que tengo una teoría / afirmación de que MVVM en DHTML es posible y viable y quiero saber si está de acuerdo / en desacuerdo conmigo y por qué. La implementación de MVVM en DHTML gira en torno al uso de llamadas ajax a una entidad de servidor que devuelve JSON y luego utiliza la manipulación html a través de javascript para controlar el html.
Entonces para descomponerlo. Digamos que estoy construyendo una página de búsqueda que busca personas en una base de datos .....
La vista se vería así:
<body viewmodel="SearchViewModel">
Search:<br />
<input type="text" bindto="SearchString" /><br />
<input type="button" value="Search" command="Search" />
<br />
<table bindto="SearchResults">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>${FirstName}</td>
<td>${LastName}</td>
</tr>
</tbody>
</table>
</body>
Utilizando algunos atributos no estándar en mis elementos html, he definido de forma definible una vista y cómo va a interactuar con mi ViewModel . Creé un analizador MVVM en javascript que interpreta los atributos no estándar y asocia la vista con un objeto JSON que representa ViewModel.
El ViewModel sería un objeto JSON:
//View Model SearchViewModel would be assocaited with View because of <body viewmodel="SearchViewModel">
var SearchViewModel = {
//SearchString variable has a TwoWay binding
//to <input type="text" bindto="SearchString" /><
//if a user types into the text box, the SearchString property will "auto-magically" be updated
//because of the two way binding and how the element was interpreted via my MVVM parser
SearchString: '''',
//SearchResults has a OneWay binding to <table bindto="SearchResults">
SearchResults: new Array(),
//Search function will get "auto-magically" get called because of
//the command binding to <input type="button" command="Search" />
Search: function() {
//using jquery to call into the server asynchronously
//when the server call is completed, the PopulateSearchResults method will be called
$.getJSON("www.example.com/SearchForPerson",
{ searchString: SearchViewModel.SearchString },
SearchViewModel.PopulateSearchResults);
}
PopulateSearchResults: function(data) {
//set the JSON array
SearchViewModel.SearchResults = data;
//simulate INotifyPropertyChanged using the MVVM parser
mvvmParser.notifyPropertyChanged("SearchResults");
}
}
El Modelo puede ser cualquier activo del servidor que devuelva JSON ... en este ejemplo, utilicé ASP MVC como una fachada tranquila:
public JsonResult SearchForPerson(string searchString)
{
PersonDataContext personDataContext = new PersonDataContext(); //linq to sql.....
//search for person
List<Person> results =
personDataContext.Persons
.Where(p => p.FirstName.Contains(searchString)
|| p.LastName.Contains(searchString))
.ToList();
return Json(results);
}
Entonces, nuevamente la pregunta:
¿Es MVVM posible / viable en una aplicación DHTML RIA (no Silverlight / WPF) o he perdido la cabeza?
¿Podría este "marco MVVM" ser una buena idea?
Prueba de concepto: kaboom.codeplex.com .
Este sería probablemente un buen momento para vincular JS knockout , que es un marco javascript mvvm.
También es posible que desee ver la red troncal , un marco javascript MVC:
Parece posible y viable, con el único inconveniente es que su código se basa en un montón de procesamiento del lado del cliente para llegar al resultado final.
En mi opinión, aún es mucho mejor utilizar una arquitectura MVC del lado del servidor en lugar de tratar de crear un marco MVVM del lado del cliente.
Eche un vistazo a las funciones de enlace de datos de ASP.NET en .NET 4.0: sale con Visual Studio 2010. Esto es exactamente lo que está buscando si está de acuerdo con la tecnología de MS.
Vista previa de tecnología comunitaria en codeplex
Teóricamente, podría simplemente incluir el archivo ASP.NET AJAX js de sus archivos HTML y hacer que la solución sea multiplataforma.
Entonces, para responder directamente a su pregunta, es una solución viable al problema de la creación de interfaces de usuario web mantenibles y poco compactas. Y sí, el lado del servidor de su aplicación está haciendo menos, se convierte en una verdadera capa de servicios, donde todo lo que se trata es el intercambio de datos. Esto es realmente una buena cosa, porque promueve la reutilización entre los clientes. Imagine su aplicación WPF y su aplicación web utilizando el mismo servidor de nivel medio para enviar / recibir datos. Los clientes tienen mucho poder de procesamiento disponible de todos modos, ¿por qué no aprovecharlo para que su solución sea más escalable? (Cuanto menos esté haciendo el servidor, más trabajo harán sus clientes, que se distribuirá entre TODOS los clientes)
La parte engañosa es la vinculación bidireccional, donde se engancha en el evento de que algún objeto ha cambiado, y el evento de que algo en la interfaz de usuario ha cambiado (el usuario tipeó algo en un control de entrada, por ejemplo). Una forma de enlace aún sería útil.
Parece que Microsoft es la única compañía que ahora está creando una solución completa en el patrón que desea. La biblioteca YUI de Yahoo sí hace el enlace de datos que es semi-coherente, pero no en el mismo patrón que WPF / Silverlight como usted ha creado.
Estoy usando un concepto similar y agregué JQuery Templating & DataLink (http://weblogs.asp.net/scottgu/archive/2010/10/04/jquery-templates-data-link-and-globalization-accepted-as- official-jquery-plugins.aspx) a la ecuación como una forma de tener vistas limpias y encuadernación declarativa (la parte vinculante me está dando algunos problemas, pero creo que podría funcionar bien).
Usar esto en un escenario donde tengo que consumir servicios de manera asincrónica, y realmente me está gustando.
Me pregunto cómo es tu MVVM Parser, utilicé un plugin pub / sub para las comunicaciones.