2011-01-08 16 views
5

Con abbondanza di servizi Web e caratteristiche di client side di jQuery e Mi piace, la creazione di mashup o siti che consumano una moltitudine di servizi Web e la pubblicazione di dati su questi servizi sta diventando estremamente popolare. Per una pagina di dimensioni decenti con questo tipo di architettura, diciamo una dashboard. Quali sono le tecniche utili per mantenere questo stato lato client. In altre parole, quali sono alcuni dei modi per fare un databinding bidirezionale? Scenario Esempio:Tecniche più utili per l'associazione dati bidirezionale con js

  1. ottenere i dati dal servizio come JSON/XML
  2. Mostra/Bind sulla UI
  3. acquisire l'input dell'utente
  4. richiesta
  5. Ricrea dai controlli UI/html
  6. inviare dati a servizio
  7. ottenere risposta e rilegare

risposta

4

In jQuery è possibile e con la richiesta AJAX di caricamento della pagina che chiama il servizio, restituisce un oggetto e associa tale oggetto al form utilizzando il plugin jQuery Templates. Quando è necessario inviare il modulo, è possibile utilizzare il plug-in jQuery Form per inviare al servizio tramite AJAX e restituire l'oggetto JSON, associandolo al contenitore del plugin jQuery Templates (il modulo).


Inoltre, è possibile combinare l'uso del plug-in "Form" di jQuery per inviare il modulo e la libreria JavaScript KnockOut, che è interamente relativa al tipo di associazione che si desidera eseguire.

See knockout JS dettagli delle biblioteche sul http://knockoutjs.com/

Le prime due caratteristiche come elencato ci sono:

  • Declerative Associazioni
  • automatica UI Refresh

vedere questo esempio vivo per molto piccola introduzione http://knockoutjs.com/examples/helloWorld.html


Aggiornamento:

Da questa risposta ha un recente upvote, è anche importante ricordare il relativamente nuovo capretto in città, angularJS, è un po 'di un quadro più grande che può fare tante cose , ma il collegamento dati bidirezionale è la cosa più semplice di sempre.

URL ufficiale: http://angularjs.org

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

http://gurustop.net

3

Angular è il giocatore più impressionante che ho visto per due vie databinding. È possibile utilizzare semplici oggetti JavaScript vecchi, collegarli a un oggetto ambito angolare e quindi associare l'ambito a una sezione del DOM. Ecco un esempio per Angular 0.9. (Angolare 1.0 utilizza un API molto diverso per ottenere la stessa cosa.)

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

È possibile utilizzare espressioni angolari in HTML per l'associazione dati, tra cui i controlli dei moduli.

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

In questo caso, la proprietà di saluto degli oggetti scope viene aggiornato con ogni battitura nella casella di testo.

Oppure, se non si desidera utilizzare le espressioni di associazione dati nel codice HTML, è possibile eseguire tutto manualmente.

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

Poi ogni volta che si aggiorna l'oggetto ambito e chiamata $ eval(), se qualcosa è cambiato, saranno informati gli ascoltatori.

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

E la parte migliore è che si possono apportare modifiche a nulla attaccati al campo di applicazione, chiamare il suo metodo $ eval(), e il codice HTML aggiorna automaticamente.

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

Knockout JS è inferiore perché invece di lavorare con semplici oggetti JavaScript, gli array, stringhe e numeri, è necessario creare le istanze dei suoi Observable e ObservableArray classi per fare l'associazione dati.

Divertiti!

1

Vorrei dare un'occhiata a Lava JS (http://lava.codeplex.com). Ha una datazione molto bella ed è molto discreto da usare. Supporta anche il recupero/la pubblicazione di dati sul server.

+1

Continua a lavorare su quell'uomo. Molto leggero rispetto ad altri binding di dati che ho visto. E più chiaro. – stringparser

+0

@phoenix, grazie! Abbiamo appena lanciato il progetto in Beta. Molto felice di vedere che ti piace. – tjscience

Problemi correlati