Associazioni avanzate in Knockout.js

La scrittura di applicazioni complesse è legata all'aumento della complessità del codice, anche se questo solitamente non è un assioma o una regola stabilita, infatti sarebbe meglio se la nostra applicazione fosse complessa a causa dell'unione di tante piccole applicazioni, poiché una semplice piccola app renderebbe la vita dello sviluppatore meno complicata.

In caso di Knockout.js succede qualcosa di simile con attacchi, dove ci sono comportamenti che possiamo ottenere usando il attacchi Tuttavia, questo genererebbe un'elevata complessità alla fine poiché questo ci taglia un po 'di flessibilità, con questo non diciamo che il attacchi le basi sono pessime, ci sono semplicemente momenti in cui non funzionerebbero correttamente per noi.

Associazioni avanzateEcco perché dobbiamo usare il attacchi avanzati, qui possiamo costruire il nostro attacchi con comportamenti che definiamo direttamente, risparmiandoci un certo grado di complessità nel codice e guadagnando leggibilità, l'unico svantaggio di chiamarlo cioè che costruiremmo questi comportamenti quasi da zero, rendendo nullo il riutilizzo del codice.

Effettua il binding di due o più ViewModel
Ci sono momenti in cui il nostro Visualizza modelli dovrebbe rimanere il più semplice possibile, o forse abbiamo bisogno di usare a Visualizza modello che è condiviso su ogni pagina della nostra applicazione, in ogni caso il requisito di poterne utilizzare diversi Visualizza modelli allo stesso tempo rimane.

Come funziona?Prima di preoccuparci di questo problema, è bene sapere che non è una cosa folle e non impossibile da fare, infatti è una pratica molto comune mantenere la semplicità e la leggibilità del nostro codice nell'applicazione. Per far sì che ciò accada dobbiamo solo passare un secondo parametro al metodo ko.applyBindings che ci aiuterà a raggiungere questo obiettivo limitando il legame al HTML che lo contiene, in questo modo possiamo applicare tutte le Visualizza modello di cui abbiamo bisogno senza alcun inconveniente

Vediamo un piccolo esempio in cui lo renderemo possibile, prima di tutto andremo a costruire un HTML dove avremo due elementi ciascuno con un nome di Visualizza modello diverso, questo ci darà le basi per ciò che vogliamo ottenere e all'interno di ogni input metteremo semplicemente a associazione dati di tipo testo.

Già nella parte di JavaScript definiremo il nostro Visualizza modello general dove restituiremo un attributo chiamato Nome e al momento di farne l'istanza, creeremo a visualizzaModello1 e un visualizzaModello2 quali saranno le istanze del Visualizza modello generale che creiamo utilizzando nomi diversi, infine applicando il ko.applyBinding diremo quale blocco HTML ognuno deve appartenere e così raggiungeremo l'obiettivo di questo esempio.

Vediamo quindi nel codice seguente come esprimiamo tutto ciò che abbiamo spiegato in precedenza:

 Associazione dati avanzata

Vediamo nell'immagine seguente come appare il nostro esempio quando lo eseguiamo nel browser:

INGRANDIRE

Vediamo nell'immagine che i nostri due VisualizzaModelli effettivamente vengono applicati nel nostro HTML ognuno contenuto nell'elemento che passiamo come secondo parametro al metodo ko.applyBindings () dandoci così l'idea di come possiamo applicarlo in modo più completo nelle nostre applicazioni.

Attacchi e TinyMCE
Per questo esempio costruiremo una funzionalità adattata al mondo reale, costruiremo un legame avanzato per aiutarci a incorporare l'editor TinyMCE nel nostro HTML, ciò che fa questo editor è creare un'interfaccia WYSIWYG, ovvero un editor di testo avanzato. La principale difficoltà di questa implementazione è che dobbiamo crearne una nostra legame, che può causarci mal di testa se non abbiamo una guida adeguata, che avremo ora.

RequisitiPer eseguire questo esempio dobbiamo scaricare alcune risorse esterne, in questo caso jQuery nella sua ultima versione, oltre a scaricare il TinyMCE e includerlo nel nostro progetto, per ottenere le risorse dobbiamo semplicemente fare una rapida ricerca in Google quindi non ci soffermeremo a lungo su questo punto. L'altra cosa di cui avremo bisogno è creare un nuovo file chiamato kobinding.js che è dove scriveremo il codice necessario in modo che la nostra soluzione possa funzionare correttamente. Una volta scaricate tutte le nostre risorse e in un percorso a cui possiamo accedere dalla nostra applicazione, possiamo quindi scrivere il nostro codice.

Quello che farà l'applicazione è darci un anteprima di ciò che scriviamo, per questo creeremo un form in cui posizioneremo la nostra casella di testo che avrà a TinyMCE, un pulsante di reset per riportare tutto allo stato iniziale e infine a dove riceveremo il testo che stiamo scrivendo.

Infine includeremo tutte le nostre risorse compreso il nuovo file kobinding.js e costruiamo il codice necessario per il nostro Visualizza modello con un osservabile che ci consente di rilevare le modifiche nella nostra casella di testo, vediamo come appare il nostro codice:

 Advanced Data Binding TinyMCE Reset Content
Anteprima

Se osserviamo il codice e abbiamo seguito i tutorial precedenti, noteremo che non c'è nulla che possa darci dei dubbi, tuttavia se lo eseguiamo nel nostro browser non funzionerà nel modo che abbiamo spiegato ed è perché noi bisogno di legame personalizzato nel nostro nuovo file.

Ciò che fa questo nuovo codice è un collegamento tra il comportamento del TinyMCE e il nostro Visualizza modello, per questo creeremo due funzioni o metodi chiamati dentro sì aggiornare, per il metodo dentro come suggerisce il nome è quando inizializziamo il nostro componente, qui impostiamo il legame della textarea con TinyMCE in modo che possiamo applicare l'osservabile, inoltre definiremo l'evento Cambia ovvero quando lo stato e il contenuto della nostra casella di testo cambiano, in modo che possiamo aggiornare il contenuto in tempo reale.

L'altro metodo o funzione è aggiornare, questo si attiva ogni volta che ci sono cambiamenti nell'elemento collegato, come il pulsante per ristabilire il contenuto, che ciò che fa è che è direttamente collegato a ciò che ci fornisce l'osservabile che avevamo creato in precedenza. Vediamo quindi il codice finale per il nostro kobinding.js:

 ko.bindingHandlers.tinymce = {init: function (element, valueAccessor, allBindingsAccessor) {var tinymceOptions = {setup: function (editor) {editor.on ('change', function (event) {valueAccessor () (event.target. getContent());}); }}; $ (elemento) .text (valueAccessor () ()); setTimeout (funzione () {$ (elemento) .tinymce (tinymceOptions);}, 0); ko.utils ['domNodeDisposal']. addDisposeCallback (elemento, funzione () {$ (elemento) .tinymce (). remove ();}); }, 'update': funzione (elemento, valueAccessor, allBindings) {var tinymce = $ (elemento) .tinymce (), valore = valueAccessor () (); if (tinymce) {if (tinymce.getContent ()! == valore) {tinymce.setContent (valore); }}}};

Se eseguiamo di nuovo nel nostro browser vedremo che tutto funziona come dovrebbe, al momento della scrittura e se cambiamo il focus vedremo che nella nostra area di anteprima abbiamo il contenuto come dovrebbe apparire:

INGRANDIRE

Con questo siamo stati in grado di creare un rilegatura avanzata e personalizzato che ci aiuta a capire tutto ciò che possiamo ottenere con un po' di ingegno e tutti gli strumenti che ci dà Tramortire. Casi come quello di TinyMCE Sono molto comuni, poiché questo tipo di plug-in è molto popolare nello sviluppo di applicazioni web, quindi potremmo dover applicare una soluzione simile ad un certo punto dello sviluppo del nostro progetto.

Con questo abbiamo terminato questo tutorial, come si vede non è necessario limitarsi alle funzioni e ai metodi prestabiliti in TramortireCerto, ci sono funzionalità ancora molto avanzate per questo livello di conoscenza ma che con la pratica e la ricerca possono essere raggiunte. La cosa interessante è che tutto questo si può ottenere con una piccola lettura della documentazione ufficiale di Tramortire e anche alla ricerca di casi esemplificativi che ci aiutino a illustrarci e a collocarci in un contesto.