2011-01-08 5 views
5

Con la abundancia de servicios web y características de jQuery y me gusta del lado del cliente, la creación de mashups o sitios que consumen una gran cantidad de servicios web y la publicación de datos a estos servicios es cada vez más popular. Para una página de tamaño decente con este tipo de arquitectura, digamos un tablero de instrumentos. ¿Cuáles son las técnicas útiles para mantener este estado del lado del cliente? En otras palabras, ¿cuáles son algunas de las formas de hacer un enlace de datos bidireccional? escenario muestra:La mayoría de las técnicas útiles para vinculación de datos bidireccional con js

  1. Obtener datos de servicio como JSON/XML
  2. Pantalla/Unir por el interfaz de usuario
  3. capturar la entrada del usuario
  4. solicitud
  5. Volver a crear a partir de los controles de interfaz de usuario/html
  6. publicar datos en Servicio
  7. obtener una respuesta y volver a enlazar

Respuesta

4

En jQuery puede enviar asily hacer la solicitud de AJAX de la carga de la página que llama al servicio, devuelve un objeto y vincular ese objeto al formulario utilizando el plugin de jQuery Templates. Cuando se deba enviar el formulario, puede usar el complemento jQuery Form para enviarlo al servicio a través de AJAX y devolver el objeto JSON, vincularlo al contenedor del complemento jQuery Templates (el formulario).


Además, puede combinar el uso del complemento jQuery "Formulario" para enviar el formulario y la biblioteca KnockOut JavaScript, que es todo sobre el tipo de enlace que desea hacer.

Ver nocaut JS detalles de la biblioteca en http://knockoutjs.com/

Las primeras dos características que se enumeran existen:

  • Declerative enlaces
  • automática de interfaz de usuario de actualización

ver este ejemplo vivo para muy pequeña introducción http://knockoutjs.com/examples/helloWorld.html


Actualización:

Desde esta respuesta tiene un upvote reciente, también es importante mencionar el relativamente nuevo chico en la ciudad, AngularJS, que es un poco de un marco más amplio que puede hacer muchas cosas , pero hacer un enlace de datos bidireccional es la cosa más fácil que haya existido.

URL oficial: http://angularjs.org

Ejemplo: http://docs.angularjs.org/guide/forms

http://gurustop.net

3

Angular es el jugador más impresionante que he visto para el enlace de datos bidireccional. Puede usar objetos simples de JavaScript antiguos, adjuntarlos a un objeto de ámbito angular y luego vincular el alcance a una sección del DOM. Aquí hay un ejemplo para Angular 0.9. (Angular 1.0 utiliza un API muy diferente para lograr lo mismo.)

// angular.compile() returns a databinding function 
var databind = angular.compile(document.documentElement); 
var model = angular.scope(); 

// add data to the scope object 
model.greeting = "Hello, World!"; 
model.colors = ["red", "green", "blue"]; 

// hook 'em up 
databind(model); 

Se pueden utilizar expresiones angulares en el código HTML de enlace de datos, incluyendo los controles de formulario.

<!DOCTYPE html> 
<input name="greeting" /> 
<span ng:repeat="color in colors" style="color: {{color}}"> 
    {{color}} 
</span> 

En este caso, la propiedad de saludo de los objetos del osciloscopio se actualiza con cada pulsación de tecla en el cuadro de texto.

O si no desea utilizar expresiones de enlace de datos en su HTML, puede hacer todo de forma manual.

model.$watch("greeting", function (value) { 
    // when the greeting changes, update the DOM 
    $("input[name=greeting]").val(value); 
}); 

Entonces, cada vez que actualice el objeto alcance y la llamada $ eval(), si algo ha cambiado, se notificará a los oyentes.

model.greeting = "Hi."; 
model.$eval(); 

Y la mejor parte es que se pueden realizar cambios en cualquier unidos al alcance, llamar a su método $ eval(), y el código HTML se actualiza automáticamente.

model.colors.append("yellow"); 
model.colors.sort(); 
model.$eval(); // notifies listeners, including bound HTML 

Knockout JS es inferior porque en lugar de trabajar con los llanos de JavaScript objetos, matrices, cadenas y números, se debe crear instancias de sus Observable y ObservableArray clases para hacer de enlace de datos.

¡Disfrútalo!

1

Me gustaría echar un vistazo a Lava JS (http://lava.codeplex.com). Tiene un enlace de datos muy bueno y es muy discreto de usar. También es compatible con la obtención/publicación de datos en el servidor.

+1

Sigue trabajando en ese hombre. Muy ligero que otros enlaces de datos que he visto. Y más claro. – stringparser

+0

@phoenix, gracias! Acabamos de lanzar el proyecto en Beta. Muy emocionado de ver que te gusta. – tjscience

Cuestiones relacionadas