Tutto sui moduli Knockout.js

Oggi vogliamo parlarti dei moduli Knockout.js ; poiché possono essere utilizzati sia in applicazioni che su siti Web; facilitare la fornitura dei dati necessari, in modo più semplice da elaborare.

Knockout.js consente a vari elementi di unirsi e completarsi a vicenda, al fine di creare una forma fattibile e che può essere convalidata.

Di cosa hai bisogno per implementare un Knockout.js?

Per eseguire un knockout.js, è necessario disporre di quanto segue:

  • Knockout.js sul tuo sistema.
  • Connessione a Internet
  • È inoltre necessaria l’autorizzazione per creare e accedere a determinati file e applicazioni.
  • Avrai bisogno di un editor di testo.
  • E avere un web server, che è di tipo Apache o Nginx.

Collegamenti dati compatibili con Knockout.js

È essenziale definire quali sono i collegamenti dati o i collegamenti dati, con cui funziona Knockout.js; questo per avere ben definito l’ambito dei possibili risultati per l’applicazione o per la pagina Web con cui si sta lavorando.

  • Valore di associazione dati: esprime il valore degli elementi utilizzati; una volta che cambio.
  • DataInserimento TextInput: è abbastanza simile al valore; la differenza è che esprime il valore durante l’interazione; cioè, il processo è continuo , mentre il processo è in corso.
  • Data-bind Controllato: Permette di controllare l’uso degli elementi.
  • Opzioni di associazione dei dati: questa associazione consente di riempire un articolo attraverso le opzioni offerte dal modulo; Funziona perfettamente per funzionare in base a diverse opzioni .
  • SelectedOptions di associazione dati: consente di utilizzare più opzioni contemporaneamente.
  • Abilita / disabilita associazione dati: come suggerisce il nome, possiamo abilitare o disabilitare qualsiasi elemento del modulo; per usare solo quelli necessari.

Tutto sui moduli Knockout.js 1

Eventi form

Essere in grado di gestire eventi è necessario quando si lavora con i moduli; perché ci consentono di eseguire le azioni necessarie in particolari processi ; o in generale nel nostro HTML. Successivamente parleremo dei diversi eventi che possono essere realizzati con i moduli:

Invia evento

La sua attivazione si verifica quando il modulo viene inviato al server ; tramite il metodo di invio dell’input o altro tipo di metodo.

Fai clic su evento

Come ci fa pensare il nome, è l’azione di fare clic sugli elementi che partecipano al modulo.

Evento HasFocus

Questo evento si riferisce alla selezione effettuata da un utente di alcuni elementi, mentre questo elemento è già in uso .

Esempi pratici di Knockout.js

In sintesi possiamo mettere in pratica, sia i collegamenti dati che i diversi eventi, nei moduli Knockout.js. Quando inizi la creazione del modulo, ci sarà un elenco; Avremo anche un’immagine come dimostrazione, per avere un riferimento alle azioni intraprese .

Per eseguire il modulo Knockout.js; è necessario disporre dell’aiuto della libreria jQuery ; Con questa libreria otterremo gli effetti necessari per l’applicazione o il sito Web su cui stiamo lavorando. Se non hai questo jQuery, puoi scaricarlo per averlo disponibile quando ne hai bisogno. Ora ti mostreremo il codice necessario:

<! DOCTYPE html> <html lang = “en”> <head> <meta charset = “UTF-8 ″> <title> Moduli in knockout.js </title> </head> <body> <img id =” actual_ cosa ”/> <ul> <! – ko foreach: things -> <li data-bind =” testo: descrizione, evento: {mouseover: $ parent.load Image} ”> </li> <! – / ko -> </ul> <script src = “https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js”> </script> <script src = “js / knockout-3.3 .0.js “type =” text / javascript “> </script> <script> funzione ViewModel () {var self = this; self.cosas = [{description: ‘La nostra casa è molto lussuosa e per questo motivo ci piace molto’, immagine: ‘casa.jpg’}, {descrizione: ‘La nostra auto è molto veloce e ha una tecnologia all’avanguardia’, immagine: ‘auto.jpg’}]; self.cargaImage = function (data, evento) {$ (‘# actual_ thing’). attr (‘src’, data.imagen); }; }; var viewModel = new ViewModel (); ko.applyBindings (vista del modello); </script> </body> </html>

Tutto sui moduli Knockout.js 2

Con questi codici, è stato creato un elenco con descrizione e immagine; l’accesso a questi dati sarà reso possibile con l’applicazione prescelta ; e infine, l’immagine può essere aggiunta tramite un selettore disponibile in jQuery; Con ciò possiamo assicurarci che sia i dati che l’immagine siano gli stessi nel DOM .

Per quanto riguarda l’ HTML , l’elenco è già stato creato, con i relativi elementi; non resta che assegnare la funzione che devi eseguire nell’evento corrispondente.

 

Potrebbe interessarti

Lascia un commento