Accentsconagua

Binding interattivi

Codice
Share

Gli elementi del modulo sono il modo convenzionale per interagire con gli utenti attraverso una pagina web. Lavorare con i form in Knockout.js equivale a lavorare con i bind di aspetto. Tuttavia, poiché gli utenti possono modificare i campi modulo, Knockout.js gestisce gli aggiornamenti in entrambe le direzioni. Ciò significa che i collegamenti interattivi sono a doppio senso. Possono essere impostati a livello di codice e la vista verrà aggiornata di conseguenza, o possono essere impostati dalla vista e letti in modo programmatico.

Figura 19: Knockout.js che propaga le modifiche in entrambe le direzioni

Ad esempio, è possibile impostare il valore di un campo di immissione del testo da ViewModel e verrà visualizzato nella vista. Tuttavia, l'utente che digita qualcosa nel campo di input fa sì che anche la proprietà associata sul ViewModel venga aggiornata. Il punto è che Knockout.js si assicura sempre che la vista e il ViewModel siano sincronizzati.

Knockout.js include 11 associazioni per l'interazione con l'utente:

  • clic: -Chiama un metodo ViewModel quando si fa clic sull'elemento.
  • valore: -Collega il valore di un elemento di un modulo a una proprietà ViewModel.
  • evento: -Chiama un metodo quando si verifica un evento avviato dall'utente.
  • Sottoscrivi: -Chiama un metodo quando viene inviato un modulo.
  • abilitare: -Abilita un elemento del modulo in base a una determinata condizione.
  • disattivare: -Disabilitare un elemento del modulo in base a una determinata condizione.
  • verificato: -Collegare un pulsante di opzione o una casella di controllo a una proprietà ViewModel.
  • opzioni: -Definisci a campo.
  • hasfocus: -Definire se l'elemento è focalizzato o meno.

    • Come i bind di aspetto presentati nella lezione precedente, questi sono tutti definiti nell'attributo data-bind di un elemento HTML. Alcuni di loro (come il clic vincolante) funzionano su qualsiasi elemento, ma altri (come controllato) possono essere utilizzati solo con elementi specifici.

    Uno dei principali vantaggi dell'utilizzo di Knockout.js per gestire i moduli HTML è proprio questo ancora solo preoccuparsi dei dati. Ogni volta che l'utente modifica il valore di un elemento del modulo, ViewModel rifletterà automaticamente l'aggiornamento. Ciò semplifica l'integrazione dell'input dell'utente nel resto dell'applicazione.

    Un modulo HTML

    Questa lezione utilizza una nuova pagina HTML per l'esempio in esecuzione. Invece di una pagina di visualizzazione del carrello degli acquisti, lavoreremo con un modulo di registrazione per i nuovi clienti. Crea un nuovo file HTML chiamato interattivo-bindings.html e aggiungi il seguente:

       Binding interattivi

    Questa è una versione semplificata di ciò con cui abbiamo lavorato durante tutta la serie. In questa lezione, ci preoccuperemo solo di configurazione elementi di forma. L'invio dei moduli di elaborazione è lasciato per la lezione successiva.

    Il clic Rilegatura

    Il bind di clic è uno dei collegamenti interattivi più semplici. Chiama semplicemente un metodo di ViewModel quando l'utente fa clic sull'elemento. Ad esempio, aggiungi il seguente pulsante all'interno del

    elemento:

    Quando l'utente fa clic sul pulsante, Knockout.js chiama il saveUserData () metodo attivo PersonViewModel. Inoltre, passa due parametri al metodo del gestore: il modello corrente e l'evento DOM. Un metodo saveUserData () che utilizza entrambi questi parametri assomiglierebbe a qualcosa:

     this.saveUserData = function (model, event) alert (model.firstName () + "sta cercando di pagare!"); if (event.ctrlKey) alert ("Stava tenendo premuto il tasto Control per qualche motivo."); ;

    In questo particolare esempio, modello si riferisce all'istanza ViewModel di primo livello e evento è l'evento DOM attivato dal clic dell'utente. L'argomento del modello sarà sempre il attuale ViewModel, che consente di accedere a singoli elementi dell'elenco in un ciclo foreach. Ecco come abbiamo implementato il metodo removeProduct () nella Lezione 3:.

    Il valore Rilegatura

    Il binding del valore è molto simile al binding del testo che abbiamo utilizzato in questa serie. La differenza principale è che può essere modificato dal utente, e il ViewModel si aggiornerà di conseguenza. Ad esempio, possiamo collegare il nome di battesimo e cognome osservabili con un campo di input aggiungendo il seguente codice HTML al modulo (prima di

    I metodi del gestore dovrebbero apparire come il seguente:

     this.displayName = function () alert (this.firstName ()); ; this.setName = function () this.firstName ("Bob"); ;

    Facendo clic Nome da visualizzare leggerà il ViewModel nome di battesimo proprietà, che dovrebbe corrispondere al elemento, anche se è stato modificato dall'utente. Il Imposta nome pulsante imposta il valore della proprietà ViewModel, causando il elemento da aggiornare. Il comportamento di quest'ultimo è essenzialmente lo stesso di un normale binding di testo.

    Ancora una volta, il punto fondamentale di questa sincronizzazione a due vie è di concentrarti sui tuoi dati. Dopo aver impostato a valore vincolante, puoi completamente dimenticare gli elementi del modulo HTML. È sufficiente ottenere o impostare la proprietà associata su ViewModel e Knockout.js si prenderà cura di tutto il resto.

    Non avremo bisogno del nome da visualizzare e setName metodi o i loro rispettivi pulsanti, in modo da poter andare avanti e cancellarli, se lo desideri.

    Il evento Rilegatura

    Il evento binding ti consente di ascoltare eventi DOM arbitrari su qualsiasi elemento HTML. È come una versione generica del clic rilegatura. Tuttavia, poiché può ascoltare più eventi, richiede che un oggetto esegua la mappatura degli eventi sui metodi (questo è simile al parametro del binding di attr). Ad esempio, possiamo ascoltare gli eventi mouseover e mouseout sul primo elemento con il seguente:

     
     Nome di battesimo:

    Quando l'utente spara a mouseover evento, Knockout.js chiama il Mostra dettagli() metodo del nostro ViewModel. Allo stesso modo, quando lascia l'elemento, viene chiamato hideDetails (). Entrambi hanno gli stessi parametri dei gestori del collegamento di clic: il target dell'evento e l'oggetto evento stesso. Implementiamo ora questi metodi:

     this.showDetails = function (target, event) alert ("Mouse sopra"); ; this.hideDetails = function (target, event) alert ("Mouse fuori"); ;

    Ora, quando interagisci con nome di battesimo campo, dovresti vedere entrambi i messaggi pop-up. Ma, invece di visualizzare semplicemente un messaggio di avviso, mostriamo alcune informazioni aggiuntive per ogni campo modulo quando l'utente lo passa sopra. Per questo, abbiamo bisogno di un altro osservabile su PersonViewModel:

     this.details = ko.observable (false);

    Il dettagli proprietà agisce come un interruttore, che possiamo attivare e disattivare con i nostri metodi di gestore di eventi:

     this.showDetails = function (target, event) this.details (true); ; this.hideDetails = function (target, event) this.details (false); ;

    Quindi possiamo combinare l'interruttore con il visibile associazione per mostrare o nascondere i dettagli del campo modulo nella vista:

     
     Nome di battesimo:  Il tuo nome

    Il contenuto del dovrebbe apparire ogni volta che si mouse sopra il nome di battesimo spara e sparisci quando tocchi il mouse. Questo è abbastanza vicino alla nostra funzionalità desiderata, ma le cose diventano più complicate una volta che vogliamo visualizzare i dettagli per più di un campo modulo. Dato che abbiamo solo una variabile di commutazione, la visualizzazione dei dettagli è una proposizione "tutto o niente", per cui vengono visualizzati i dettagli tutti dei campi, o per nessuno di loro.

    Figura 21: commutazione simultanea di tutti i dettagli del campo modulo

    Un modo per risolvere questo problema è passare un parametro personalizzato alla funzione del gestore.

    Gestori di eventi con parametri personalizzati

    È possibile passare parametri personalizzati dalla vista al gestore eventi. Ciò significa che puoi accedere a informazioni arbitrarie dalla vista nel ViewModel. Nel nostro caso, useremo un parametro personalizzato per identificare quale campo del modulo dovrebbe mostrare i suoi dettagli. Invece di un interruttore, il dettagli osservabile conterrà una stringa che rappresenta l'elemento selezionato. Innanzitutto, apporteremo alcune piccole modifiche al ViewModel:

     this.details = ko.observable (""); this.showDetails = function (target, event, details) this.details (dettagli);  this.hideDetails = function (target, event) this.details ("");

    L'unico grande cambiamento qui è l'aggiunta di a dettagli parametro al Mostra dettagli() metodo. Non abbiamo bisogno di un parametro personalizzato per la funzione hideDetails () poiché elimina solo i dettagli osservabili.

    Successivamente, useremo una funzione letterale nel evento vincolante per passare il parametro personalizzato a showDetails ():

    La funzione letterale per mouseover è un involucro per il nostro Mostra dettagli() gestore, fornendo un mezzo semplice per passare informazioni extra. Il gestore del mouseout rimane invariato. Infine, dobbiamo aggiornare il contenente i dettagli:

     Il tuo nome

    Il nome di battesimo il campo modulo dovrebbe visualizzare la sua descrizione dettagliata quando si passa il mouse sopra e si nasconde quando si estrae il mouse, proprio come nella sezione precedente. Solo ora è possibile aggiungere dettagli a più di un campo modificando il parametro personalizzato. Ad esempio, è possibile abilitare i dettagli per Cognome elemento di input con:

     
     Cognome:  Il tuo cognome

    I binding di eventi possono essere un po 'complicati da configurare, ma una volta capito come funzionano, consentono infinite possibilità di progettazione reattiva. Il evento l'associazione può anche connettersi alla funzionalità di animazione di jQuery, che è discussa nella Lezione 8 :. Per ora, finiremo di esplorare il resto delle associazioni interattive di Knockout.js. Fortunatamente per noi, nessuno di questi è quasi complicato come il binding di eventi.

    Il abilitare / disabilitare Attacchi

    Il abilitare e disattivare i collegamenti possono essere utilizzati per abilitare o disabilitare i campi modulo in base a determinate condizioni. Ad esempio, supponiamo di voler registrare un numero di telefono primario e secondario per ciascun utente. Questi potrebbero essere memorizzati come normali osservabili su PersonViewModel:

     this.primaryPhone = ko.observable (""); this.secondaryPhone = ko.observable ("");

    L'osservabile di primaryPhone può essere collegato a un campo modulo con un normale valore rilegatura:

     
     Telefono principale:

    Tuttavia, non ha molto senso inserire un numero di telefono secondario senza specificarne uno primario, quindi attiviamo il per il numero di telefono secondario solo se primaryPhone non è vuoto:

     
     Telefono secondario:

    Ora gli utenti saranno in grado di interagire con il Telefono secondario campo se hanno inserito un valore per Telefono principale. Il disattivare il binding è un modo conveniente per annullare la condizione, ma in caso contrario funziona esattamente come enable.

    Il verificato Rilegatura

    verificato è un attacco versatile che esibisce comportamenti diversi a seconda di come lo si utilizza. In generale, l'associazione verificata viene utilizzata per selezionare e deselezionare gli elementi del modulo controllabili in HTML: caselle di controllo e pulsanti di opzione.

    Caselle di controllo semplici

    Iniziamo con una casella di controllo semplice:

     
    Infastidiscimi con offerte speciali:

    Questo aggiunge una casella di controllo al nostro modulo e lo collega al Mi dai fastidio proprietà di ViewModel. Come sempre, questa è una connessione a due vie. Quando l'utente seleziona o deseleziona la casella, Knockout.js aggiorna ViewModel e quando imposta il valore della proprietà ViewModel, aggiorna la vista. Non dimenticare di definire il fastidioso osservabile:

     this.annoyMe = ko.observable (true);

    Usando il verificato legarsi in questo modo è come creare una relazione uno-a-uno tra una singola casella di controllo e un osservabile booleano.

    Figura 22: collegamento di un osservatore booleano con una sola casella di controllo

    Array di check-box

    È anche possibile usare il verificato vincolante con gli array. Quando si associa una casella di controllo a un array osservabile, le caselle selezionate corrispondono agli elementi contenuti nell'array, come mostrato nella seguente figura:

    Figura 23: Collegamento di un array osservabile con più caselle di controllo

    Ad esempio, considera il seguente osservabile:

    this.annoyTimes = ko.observableArray (['morning', 'evening']);

    Possiamo collegare gli elementi di questo array osservabile per selezionare le caselle usando il valore attributo su ciascuno elemento:

     
    Infastidiscimi con offerte speciali:

    Questo usa il Mi dai fastidio proprietà della lezione precedente per attivare un elenco di caselle di controllo per selezionare quando sarebbe il momento giusto per essere infastidito. Da valore = 'mattina' è sulla prima casella di controllo, sarà selezionato ogni volta che il "mattina" la stringa è nell'array annoyimes. Lo stesso vale per le altre caselle di controllo. "morning" e "evening" sono i contenuti iniziali dell'array, quindi dovresti vedere qualcosa del genere nella tua pagina web:

    Figura 24: caselle di controllo che mostrano lo stato iniziale di annoyTimes matrice osservabile

    E dal momento che stiamo usando un osservabile array, la connessione è bidirezionale, deselezionando una qualsiasi delle caselle rimuoverà la stringa corrispondente dal annoyTimes schieramento.

    Tasti della radio

    L'ultimo contesto per il verificato l'associazione è in un gruppo di pulsanti di opzione. Invece di un booleano o un array, i pulsanti di opzione si collegano valore attributo a una proprietà stringa nel ViewModel. Ad esempio, possiamo trasformare la nostra matrice di caselle di controllo in un gruppo di pulsanti di opzione modificando prima i noiosi parametri osservabili in una stringa:

     this.annoyTimes = ko.observable ('morning');

    Quindi, tutto ciò che dobbiamo fare è girare il elementi nei pulsanti di opzione:

    Ogni avrebbe dovuto "Radio" come il suo tipo e "annoyGroup" come il suo nome. Quest'ultimo non ha nulla a che fare con Knockout.js, ma aggiunge tutti tutti allo stesso gruppo di pulsanti di scelta HTML. Ora, l'attributo value del pulsante di opzione selezionato verrà sempre archiviato nella proprietà annoyTimes.

    Figura 25: collegamento di una stringa osservabile con più pulsanti di opzione

    Il opzioni Rilegatura

    Il opzioni binding definisce il contenuto di a campo con:

    Ora dovresti avere un elenco a discesa invece di un gruppo di pulsanti di opzione, ma è inutile avere un elenco di questo tipo se non riesci a capire quale elemento è selezionato. Per questo, possiamo riutilizzare il valore vincolante da precedenti nella lezione:

    Questo determina quale proprietà sul ViewModel contiene la stringa selezionata. Dobbiamo ancora definire questa proprietà:

     this.selectedTime = ko.observable ('Nel pomeriggio');

    Ancora una volta, questa relazione va in entrambe le direzioni. Impostazione del valore di selectedTime cambierà la voce selezionata nell'elenco a discesa e viceversa.

    Usando gli oggetti come opzioni

    La combinazione delle opzioni e dei binding di valori fornisce tutti gli strumenti necessari per lavorare con gli elenchi a discesa che contengono stringhe. Tuttavia, è spesso molto più conveniente selezionare interi oggetti JavaScript utilizzando un elenco a discesa. Ad esempio, il seguente definisce un elenco di prodotti che ricordano la lezione precedente:

     this.products = ko.observableArray ([nome: 'Beer', prezzo: 10.99, nome: 'Brats', prezzo: 7.99, nome: 'Buns', prezzo: 2.99]);

    Quando provi a creare un elemento:

    Perché questo frammento funzioni, devi anche definire a favoriteProduct osservabile sul tuo ViewModel. Knockout.js compilerà questa proprietà con un oggetto da PersonViewModel.products-non una stringa come nella precedente sezione.

    Il selectedOptions Rilegatura

    L'altra possibilità di rendering per HTML

    Il taglia l'attributo definisce il numero di opzioni visibili e multipla = 'true' lo trasforma in un elenco a selezione multipla. Invece di una proprietà stringa, favoriteProducts dovrebbe puntare a un array:

     var brats = name: 'Brats', prezzo: 7.99; this.products = ko.observableArray ([nome: 'Beer', prezzo: 10.99, marmocchi, nome: 'Buns', prezzo: 2.99]); this.favoriteProducts = ko.observableArray ([brats]);

    Si noti che è necessario fornire lo stesso riferimento all'oggetto (marmocchi) A entrambi prodotti e preferitiProducts per Knockout.js per inizializzare correttamente la selezione.

    Il hasfocus Rilegatura

    E così, arriviamo alla nostra rilegatura interattiva finale: hasfocus. Questa associazione con nome appropriato consente di impostare manualmente lo stato attivo di un elemento interattivo utilizzando una proprietà ViewModel. Se, per qualche strana ragione, desideri che il campo "Telefono principale" sia il focus iniziale, puoi aggiungere un binding di hasfocus, in questo modo:

     
     Telefono principale:

    Quindi puoi aggiungere un osservabile booleano per dire a Knockout.js di focalizzarlo:

     this.phoneHasFocus = ko.observable (true);

    Impostando questa proprietà altrove nell'applicazione, è possibile controllare con precisione il flusso di messa a fuoco nei moduli. Inoltre, puoi usare hasfocus per tenere traccia dell'avanzamento dell'utente attraverso più campi modulo.

    Sommario

    Questa lezione ha riguardato i collegamenti interattivi, che sfruttano il rilevamento automatico delle dipendenze di Knockout.js dai campi dei moduli HTML. A differenza dei binding di aspetto, i binding interattivi lo sono a doppio senso collegamenti: le modifiche ai componenti dell'interfaccia utente si riflettono automaticamente in ViewModel e le assegnazioni alle proprietà ViewModel attivano Knockout.js per aggiornare di conseguenza la vista.

    I collegamenti interattivi, i binding di aspetto e i binding del flusso di controllo compongono il toolkit di template di Knockout.js. Il loro obiettivo comune è fornire un'interfaccia basata sui dati per le tue applicazioni web. Una volta definita la presentazione dei dati utilizzando questi binding, tutto ciò di cui ti devi preoccupare è la manipolazione del ViewModel sottostante. Questo è un modo molto più robusto per sviluppare applicazioni web dinamiche.

    Questa lezione ha discusso i moduli dal punto di vista della vista e del ViewModel. I collegamenti interattivi sono un metodo intuitivo e scalabile per accedere all'input dell'utente, ma dobbiamo ancora discutere su come ottenere questi dati dal front-end e da uno script sul lato server. La prossima lezione affronta questo problema integrando Knockout.js con la funzionalità AJAX di jQuery.

    Questa lezione rappresenta un capitolo da Knockout in modo succinto, un eBook gratuito dal team di Syncfusion.

    Codice
    ×