Accentsconagua

Interacțiuni interactive

Cod
Share

Elementele formularului reprezintă modalitatea convențională de a interacționa cu utilizatorii printr-o pagină Web. Lucrul cu formularele din Knockout.js este la fel ca și lucrul cu legăturile de aspect. Dar, deoarece utilizatorii pot edita câmpuri de formular, Knockout.js gestionează actualizările în ambele direcții. Aceasta înseamnă că sunt legături interactive două sensuri. Acestea pot fi programate în mod programatic, iar vizualizarea va fi actualizată corespunzător, sau acestea pot fi setate de vizualizare și citite programabil.

Figura 19: Schimbarea propagării knockout.js în ambele direcții

De exemplu, puteți seta valoarea câmpului de introducere a textului din ViewModel și acesta va fi afișat în vizualizare. Dar, utilizatorul tastând ceva în câmpul de intrare cauzează și proprietatea asociată din ViewModel. Ideea este că Knockout.js asigură întotdeauna că vizualizarea și ViewModel sunt sincronizate.

Knockout.js include 11 legături pentru a interacționa cu utilizatorul:

  • clic: -Apelați o metodă ViewModel când faceți clic pe element.
  • valoare: -Legați valoarea unui element de formă într-o proprietate ViewModel.
  • eveniment: -Apelați o metodă când apare un eveniment inițiat de utilizator.
  • a depune: -Apelați o metodă la trimiterea unui formular.
  • permite: -Activați un element de formă bazat pe o anumită condiție.
  • dezactivați: -Dezactivați un element de formă bazat pe o anumită condiție.
  • verificat: -Conectați un buton radio sau o casetă de selectare la o proprietate ViewModel.
  • Opțiuni: -Definiți a camp.
  • hasfocus: -Definiți dacă elementul este sau nu focalizat.

    • Ca și legăturile de aspect prezentate în lecția anterioară, toate acestea sunt definite în atributul de legare a datelor unui element HTML. Unele dintre ele (cum ar fi clic obligatoriu) lucrează la orice element, dar altele (cum ar fi verificate) pot fi utilizate numai cu elemente specifice.

    Unul dintre beneficiile majore ale utilizării Knockout.js pentru a gestiona formularele HTML este că tu încă trebuie doar să vă faceți griji cu privire la date. Ori de câte ori utilizatorul modifică valoarea unui element de formular, ViewModel va reflecta automat actualizarea. Acest lucru face foarte ușor integrarea intrărilor de utilizatori în restul aplicației.

    Un formular HTML

    Această lecție utilizează o nouă pagină HTML pentru exemplul care rulează. În loc de o pagină de afișare a coșului de cumpărături, vom lucra cu un formular de înregistrare pentru noi clienți. Creați un fișier HTML nou numit interactiv-bindings.html și adăugați următoarele:

       Interacțiuni interactive

    Aceasta este o versiune simplificată a ceea ce am colaborat cu seria. În această lecție, vom fi doar îngrijorați configurarea formează elemente. Prelucrarea formularului de trimitere este lăsată pentru următoarea lecție.

    clic Legare

    Legarea prin clic este una dintre cele mai simple legări interactive. Apel doar la o metodă a modelului dvs. de vizualizare atunci când utilizatorul face clic pe element. De exemplu, adăugați următorul buton în interiorul

    element:

    Când utilizatorul face clic pe buton, Knockout.js apelează saveUserData () metoda pe PersonViewModel. În plus, acesta transmite doi parametri la metoda handler: modelul curent și evenimentul DOM. O metodă saveUserData () care utilizează ambii parametri ar arăta cam ca:

     this.saveUserData = funcția (model, eveniment) alert (model.firstName () + "încearcă să se încheie!"); dacă (event.ctrlKey) alertă ("El a ținut apăsată tasta Control din anumite motive"); ;

    În acest exemplu particular, model se referă la instanța ViewModel de nivel superior și eveniment este evenimentul DOM declanșat de clicul utilizatorului. Argumentul model va fi întotdeauna actual ViewModel, care face posibilă accesarea elementelor individuale dintr-o listă dintr-o buclă de foreach. Acesta este modul în care am implementat metoda removeProduct () în Lecția 3:.

    valoare Legare

    Legarea valorilor este foarte asemănătoare cu legarea textului pe care l-am folosit în această serie. Diferența esențială este că poate fi schimbată de către utilizator, și ViewModel va actualiza în consecință. De exemplu, putem conecta Nume și numele de familie observabile cu un câmp de intrare prin adăugarea următorului cod HTML în formular (înainte de

    Metodele de manipulare ar trebui să arate după cum urmează:

     this.displayName = funcția () alert (this.firstName ()); ; this.setName = funcția () this.firstName ("Bob"); ;

    Făcând clic Numele afisat va citi modelul ViewModel Nume proprietate, care ar trebui să corespundă element, chiar dacă a fost editat de utilizator. Pune un nume butonul stabilește valoarea proprietății ViewModel, determinând valoarea element pentru actualizare. Comportamentul acestuia din urmă este, în esență, același ca și legarea textului obișnuit.

    Încă o dată, întregul punct din spatele acestei sincronizări bidirecționale este să vă permiteți să vă concentrați asupra datelor dvs. După ce ați aranjat o valoare obligatoriu, puteți uita complet elementele formularului HTML. Pur și simplu obțineți sau setați proprietatea asociată pe ViewModel și Knockout.js se va ocupa de restul.

    Nu vom avea nevoie de numele afisat și metode setName sau butoanele respective, astfel încât să puteți merge și să le ștergeți dacă doriți.

    eveniment Legare

    eveniment legarea vă permite să ascultați evenimente arbitrare ale DOM pe orice element HTML. Este ca o versiune generică a clic legare. Dar, deoarece poate asculta mai multe evenimente, este nevoie de un obiect pentru a mapa evenimentele la metode (aceasta este similară cu parametrul attr binding). De exemplu, putem asculta evenimentele mouseover și mouseout la prima element cu următoarele:

     
     Nume:

    Când utilizatorul declanșează a mouse-ul peste eveniment, Knockout.js a sunat la arata detaliile() metodă a modelului nostru de vizualizare. De asemenea, atunci când el sau ea părăsește elementul, se ascunde detaliile (). Ambele au aceleași parametri ca și manipulatorii de legare a clicurilor: ținta evenimentului și obiectul evenimentului în sine. Să implementăm aceste metode acum:

     this.showDetails = funcție (țintă, eveniment) alert ("Mouse over"); ; this.hideDetails = funcție (țintă, eveniment) alert ("Mouse out"); ;

    Acum, atunci când interacționați cu Nume câmp, ar trebui să vedeți ambele mesaje afișate. Dar, în loc de a afișa doar un mesaj de avertizare, să arătăm câteva informații suplimentare pentru fiecare câmp de formular atunci când utilizatorul îl rotește. Pentru aceasta, avem nevoie de un alt observabil PersonViewModel:

     this.details = ko.observable (false);

    Detalii proprietatea acționează ca o comutare, pe care o putem porni și opri cu metodele noastre de gestionare a evenimentelor:

     this.showDetails = funcție (țintă, eveniment) this.details (true); ; this.hideDetails = funcție (țintă, eveniment) this.details (false); ;

    Apoi putem combina comuta cu vizibil obligatoriu pentru afișarea sau ascunderea detaliilor câmpului de formă în vizualizare:

     
     Nume:  Numele tău dat

    Conținutul mesajului ar trebui să apară de fiecare dată când mouse - ul peste Nume câmp și dispar atunci când mouse-ul afară. Acest lucru este destul de aproape de funcționalitatea dorită, dar lucrurile se complică odată ce dorim să afișăm detalii pentru mai multe câmpuri. Deoarece avem doar o singură variabilă de comutare, afișarea detaliilor este o propunere totală sau nimic - fie sunt afișate detalii toate a câmpurilor, sau pentru niciuna dintre ele.

    Figura 21: Comutarea simultană a tuturor detaliilor câmpului de formular

    O modalitate de a rezolva aceasta este prin transmiterea unui parametru personalizat la funcția de manipulare.

    Event Handlers cu parametri personalizați

    Este posibil să treceți parametrii personalizați din vizualizare în dispozitivul de tratare a evenimentelor. Aceasta înseamnă că puteți accesa informații arbitrare din vizualizare în ViewModel. În cazul nostru, vom folosi un parametru personalizat pentru a identifica câmpul de formă care ar trebui să afișeze detaliile sale. În loc de a comuta, Detalii observabil va conține un șir reprezentând elementul selectat. În primul rând, vom face unele modificări ușoare în ViewModel:

     this.details = ko.observable (""); this.showDetails = funcție (destinație, eveniment, detalii) this.details (detalii);  this.hideDetails = funcție (destinație, eveniment) this.details ("");

    Singura schimbare mare aici este adăugarea unui a Detalii parametru la arata detaliile() metodă. Nu avem nevoie de un parametru personalizat pentru funcția hideDetails (), deoarece acesta curăță detaliile observabile.

    Apoi, vom folosi o funcție literală în eveniment obligatoriu pentru a trece parametrul personalizat pentru a afișa Detaliile ():

    Funcția literală pentru mouse-ul peste este un înveliș pentru noi arata detaliile() handler, oferind un mijloc direct de a transmite informații suplimentare. Manevrarea mouse-ului rămâne neschimbată. În cele din urmă, trebuie să actualizăm care conține detaliile:

     Numele tău dat

    Nume câmpul de formular ar trebui să afișeze descrierea detaliată atunci când mouse-ul se deplasează și se ascunde la ieșirea mouse-ului, la fel ca în secțiunea anterioară. Numai acum este posibil să adăugați detalii în mai multe câmpuri prin modificarea parametrului personalizat. De exemplu, puteți activa detalii pentru Numele de familie element de intrare cu:

     
     Numele de familie:  Prenumele tau

    Legarea evenimentului poate fi un pic complicată pentru a fi înființată, dar odată ce înțelegeți cum funcționează, ele permit posibilități nelimitate de design reactiv. eveniment legarea se poate conecta chiar la funcționalitatea de animație a jQuery, care este discutată în Lecția 8 :. Pentru moment, vom termina explorarea restului legăturilor interactive ale Knockout.js. Din fericire pentru noi, nici unul dintre ele nu este aproape la fel de complicat ca legăturile de eveniment.

    permite dezactivarea Bindings

    permite și dezactivați legăturile pot fi utilizate pentru a activa sau a dezactiva câmpurile de formate în funcție de anumite condiții. De exemplu, să presupunem că doriți să înregistrați un număr de telefon primar și secundar pentru fiecare utilizator. Acestea ar putea fi stocate ca observabile normale pe PersonViewModel:

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

    Primarul observabil poate fi legat de un câmp de formă cu o valoare normală valoare legare:

     
     Telefon primar:

    Cu toate acestea, nu are sens să introduceți un număr secundar de telefon fără să specificați unul primar, deci activați pentru numărul secundar de telefon numai dacă primaryPhone nu este gol:

     
     Telefon secundar:

    Acum utilizatorii vor putea interacționa numai cu Telefon secundar dacă ați introdus o valoare pentru Telefon primar. dezactivați legarea este o modalitate convenabilă de a nega condiția, dar în caz contrar funcționează exact ca și cum ar permite.

    verificat Legare

    verificat este o legare versatilă care prezintă comportamente diferite în funcție de modul în care o utilizați. În general, legarea verificată este utilizată pentru a selecta și deselecta elementele formularului de chestionare HTML: casetele de selectare și butoanele radio.

    Căsuțe simple de verificare

    Să începem cu o casetă de selectare simplă:

     
    Mă enervează cu oferte speciale:

    Aceasta adaugă o casetă de selectare în formularul nostru și le leagă de annoyMe proprietatea ViewModel. Ca întotdeauna, aceasta este o conexiune bidirecțională. Când utilizatorul selectează sau deselectează caseta, Knockout.js actualizează ViewModel, iar când setați valoarea proprietății ViewModel, acesta actualizează vizualizarea. Nu uitați să definiți observațiile annoyMe:

     this.annoyMe = ko.observable (adevărat);

    Utilizarea verificat legarea în acest mod este ca crearea unei relații unu-la-unu între o singură casetă de selectare și o observabilă booleană.

    Figura 22: Conectarea unei observabile booleene cu o singură casetă de selectare

    Casete de control

    Este, de asemenea, posibil să utilizați verificat legare cu matrice. Când legați o casetă de selectare de o matrice observabilă, casetele selectate corespund elementelor din matrice, după cum se arată în figura următoare:

    Figura 23: Conectarea unei matrice observabile cu mai multe casete de selectare

    De exemplu, luați în considerare următoarele observabile:

    this.annoyTimes = ko.observableArray (['dimineața', 'seara']);

    Putem conecta elementele din această matrice observabilă la casetele de selectare folosind valoare atribut pe fiecare element:

     
    Mă enervează cu oferte speciale:

    Aceasta utilizează annoyMe proprietate din lecția anterioară pentru a comuta o listă cu casetele de selectare pentru a selecta momentul în care ar fi un moment bun pentru a fi supărat. De cand valoare = „dimineața“ este pe prima casetă de selectare, va fi selectată ori de câte ori "dimineaţă" șirul este în matricea annoyTimes. Același lucru este valabil și pentru celelalte casete de selectare. "dimineața" și "seara" sunt conținutul inițial al matricei, deci ar trebui să vedeți ceva asemănător cu următorul text în pagina dvs. web:

    Figura 24: Bifați casetele care afișează starea inițială a casetei annoyTimes tablou observabil

    Și din moment ce o folosim observabil array, conexiunea este în două sensuri - deselectarea oricare dintre casete va elimina șirul corespunzător din annoyTimes mulțime.

    Butoane radio

    Ultimul context pentru verificat obligatorie este într-un grup de buton radio. În loc de un boolean sau o matrice, butoanele radio le conectează valoare atribuiți unei proprietăți șir în ViewModel. De exemplu, putem transforma matricea casetei de verificare într-un grup de butoane radio, schimbând mai întâi annoyTimes observabile într-un șir:

     this.annoyTimes = ko.observable ("dimineața");

    Apoi, tot ce trebuie să facem este să întoarcem elemente în butoane radio:

    Fiecare ar trebui sa aiba "radio" ca tip și "annoyGroup" ca nume. Ultimul nu are nimic de-a face cu Knockout.js - tocmai îi adaugă pe toți aceiași grup de buton radio cu același cod HTML. Acum, atributul de valoare al butonului radio selectat va fi întotdeauna stocat în proprietatea annoyTimes.

    Figura 25: Conectarea unui șir observabil cu mai multe butoane radio

    Opțiuni Legare

    Opțiuni obligatoriu definește conținutul a câmp cu:

    Acum ar trebui să aveți o listă drop-down în locul unui grup de butoane radio, dar nu aveți nicio utilitate de a avea o astfel de listă dacă nu puteți afla ce element este selectat. Pentru aceasta, putem reutiliza valoare obligatoriu de la începutul lecției:

    Aceasta determină ce proprietate din ViewModel conține șirul selectat. Trebuie să definim încă această proprietate:

     this.selectedTime = ko.observable ("În după-amiaza");

    Din nou, această relație merge în ambele sensuri. Setarea valorii selectedTime va schimba elementul selectat din lista derulantă și invers.

    Utilizarea obiectelor ca opțiuni

    Combinând opțiunile și legăturile de valoare vă oferă toate instrumentele de care aveți nevoie pentru a lucra cu liste derulante care conțin șiruri de caractere. Cu toate acestea, este adesea mult mai convenabil să selectați obiecte JavaScript întregi utilizând o listă derulantă. De exemplu, următoarele definesc o listă de produse care amintesc de lecția anterioară:

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

    Când încercați să creați o element:

    Pentru ca acest fragment să funcționeze, va trebui să definiți a favoriteProduct observabile pe ViewModel. Knockout.js va popula această proprietate cu un obiect din PersonViewModel.products - nu un șir ca în secțiunea precedentă.

    selectedOptions Legare

    Cealaltă posibilitate de redare pentru HTML

    mărimea atributul definește numărul de opțiuni vizibile și multiplă = 'true' îl transformă într-o listă cu mai multe selecții. În locul unei proprietăți șir, favoriteProducts ar trebui să indice către o matrice:

     var brats = nume: 'Brats', preț: 7.99; this.products = ko.observableArray ([name: 'Beer', pret: 10.99, brats, nume: 'Buns', pret: 2.99]); this.favoriteProducts = ko.observableArray ([brats]);

    Rețineți că este necesar să furnizăm aceeași referință de obiect (brats) ambilor produse și favoriteProducts pentru Knockout.js pentru a inițializa selecția corectă.

    hasfocus Legare

    Și astfel, ajungem la legătura noastră interactivă finală: hasfocus. Această legare numită în mod corespunzător vă permite să setați manual focalizarea unui element interactiv utilizând o proprietate ViewModel. Dacă, dintr-un motiv ciudat, doriți ca câmpul "Primary phone" să fie focalizarea inițială, puteți adăuga o legare hasfocus, cum ar fi:

     
     Telefon primar:

    Apoi puteți adăuga un observabil boolean pentru a spune Knockout.js pentru a-i acorda atenție:

     this.phoneHasFocus = ko.observable (adevărat);

    Prin setarea acestei proprietăți în altă parte a aplicației, puteți controla cu precizie fluxul de focalizare în formele dvs. În plus, puteți utiliza hasfocus pentru a urmări progresul utilizatorului prin mai multe câmpuri de formular.

    rezumat

    Această lecție se referea la legăturile interactiv, care mobilizează urmărirea automată a dependenței de către Knockout.js față de câmpurile formularului HTML. Spre deosebire de legăturile de aspect, legăturile interactive sunt două sensuri legăturile-modificările la componentele interfeței utilizator sunt reflectate automat în ViewModel, iar atribuirea proprietăților ViewModel declanșează Knockout.js pentru actualizarea vizualizării.

    Interacțiunile interacționale, legăturile de aspect și legăturile cu fluxul de control compun setul de instrumente templating al Knockout.js. Scopul lor comun este de a oferi o interfață bazată pe date pentru aplicațiile dvs. web. Odată ce definiți prezentarea datelor utilizând aceste legături, tot ce trebuie să vă faceți griji este manipularea modelului ViewModel. Aceasta este o modalitate mult mai robustă de a dezvolta aplicații web dinamice.

    Această lecție a discutat formele din perspectiva vizualizării și ViewModel. Interacțiunile interactiv sunt o metodă intuitivă și scalabilă pentru a accesa datele de intrare ale utilizatorilor, dar nu avem încă de discutat cum să scoatem aceste date din front-end și într-un script de server. Următoarea lecție abordează această problemă prin integrarea programului Knockout.js cu funcționalitatea AJAX a jQuery.

    Această lecție reprezintă un capitol din Knockout Succinct, o carte electronică gratuită de la echipa de la Syncfusion.

    Cod
    ×