Come creare associazioni personalizzate in Knockout.js?

Knockout è una libreria JavaScript che ti aiuta a creare interfacce utente ricche e reattive con un modello di dati sottostante pulito. ¿ Come a creare associazioni personalizzate in Knockout.js ?

KO può aiutarti a implementarlo in modo più semplice e sostenibile, a condizione che tu abbia sezioni dell’interfaccia utente che vengono aggiornate dinamicamente.

Come creare associazioni personalizzate in Knockout.js? 1

Come creare associazioni personalizzate in Knockout.js?

Per creare l’associazione personalizzata, è necessario aggiungere una proprietà con il nome del collegamento personalizzato e assegnare un oggetto con due funzioni di callback.

ko.bindingHandlers.myCustomBindingName = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
}
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
}
}

Qui puoi vedere che abbiamo aggiunto una proprietà myCustomBindingName assegnata con un oggetto che ha avviato e aggiornato i callback. Vediamo i callback in dettaglio.

richiamata

La funzione di richiamata iniziale verrà eseguita quando il collegamento viene applicato per la prima volta. In questo callback.

È possibile disporre della configurazione iniziale necessaria per il collegamento personalizzato , ad esempio il collegamento di eventi, la configurazione dello stato iniziale delle variabili, ecc.

Aggiorna chiamata di ritorno

La funzione di richiamata di aggiornamento verrà chiamata ogni volta che si modifica l’osservabile associato. Collegando il controller di collegamento personalizzato con l’elemento.

Se è stato associato o assegnato un osservabile al controller del collegamento personalizzato, il callback di aggiornamento verrà eseguito ogni volta che si cambia l’osservabile associato o assegnato.

Ad esempio, hai un controller di collegamento personalizzato, ad esempio ” animateItem ” che crea delle animazioni ogni volta che un elemento viene aggiunto alla raccolta.

Il controller di collegamento animateItem accetta un osservabile che decide se l’elemento aggregato deve essere animato sullo schermo o meno in base al valore osservabile vero o falso.

Ogni volta che si aggiorna l’osservabile , il callback di aggiornamento del callback del collegamento verrà chiamato con il valore aggiornato.

Come creare associazioni personalizzate in Knockout.js? 2

Parametri delle funzioni di callback

Queste funzioni di callback e di avvio hanno lo stesso set di parametri. Sono element, valueAccessor, allBindingsAccessor, viewModel e bindingContext.

Esempio
Parliamo del collegamento personalizzato con un esempio . Creeremo un collegamento personalizzato in cui possiamo mostrare il registro delle modifiche per una casella di input.

<p> Modifica questo valore: <inputdata-bind = "value: logEntry, valueUpdate: 'keyup'" /> </p>
<divdata-bind = "yourBindingName: logEntry">
<Ul>
</ Ul>
</ Div>

In questa vista di esempio, abbiamo un elemento di input collegato al logEntry osservabile assegnato / associato al link del valore. E abbiamo un div a cui abbiamo collegato il nostro link personalizzato ” YourCoustomBinding “.

Poiché abbiamo associato logEntry osservabile alla nostra offerta personalizzata, la funzione di richiamata di aggiornamento verrà eseguita ogni volta che il testo nella casella di input viene modificato.

ko.bindingHandlers.yourBindingName = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
// Configura eventi, variabili ..
$ (element) .css ("background-color", "rgb (228, 222, 222)");
}
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var text = ko.unwrap (valueAccessor ()); // Ottenere il testo del registro degli aggiornamenti
$ ('ul'). append ('<il> Il nuovo testo è:' + testo + '</il>'); // Aggiungendo ul come il.
}
}
var viewModel = {logChange: ko.observable ("Digita qualcosa")};
ko.applyBindings (viewModel);

Nella funzione di callback iniziale, come configurazione iniziale, stiamo impostando il colore di sfondo per il contenitore del registro delle modifiche.

Quando si inizia a modificare il testo, verrà chiamato l’aggiornamento di richiamata. Al richiamo dell’aggiornamento.

Stiamo sviluppando valueAccessor per far passare il valore al nostro link personalizzato. Quindi stiamo aggiungendo il testo modificato all’elemento ul come elemento il.

 

Potrebbe interessarti

Lascia un commento