aurelia

Aurelia – binding – podstawy

Binding to mechanizm wiążący dane z interfejsem użytkownika. Jak nie zbindujemy danych z kontrolką to chociaż po stronie serwera wszystko działa jak należy to po stronie klienta … leży. Napisałem po stronie serwera, ale w Aurelii wszystko dzieje się po stronie klienta, a więc to nie tak, że po stronie serwera, a raczej model widoku musi być powiązana z widokiem, a idąc w głąb elementy modelu muszą być powiązane z elementami interfejsu użytkownika.

Sposobów na bindowanie jest kilka:

  1. String interpolation
    export class App {
       upperVersion = 'Test';
    }
    
    <template>
       <div>
          <input value="${upperVersion}">
       </div>
    </template>

    I już. Po załadowaniu strony nasz input zostanie wypełniony wartością „Test”. Należy pamiętać, że w tym przypadku zmiany np:. w textbox’sie nie będą widoczne po stronie ViewModelu.

  2. bind, czyli co jeżeli interpolacja stringów nam się nie podoba albo chcielibyśmy mieć aktualne dane w ViewModelu.
    <template>
       <div>
          <input value.bind="upperVersion">
       </div>
    </template>
    
    export class App {
       upperVersion = 'Test';
    }

    Zamiast używania interpolacji wystarczy dodać .bind do atrybutu value i użyć nazwy zmiennej klasy. O rodzajach bindowania napiszę w innym poście.

  3. Value converter pipe „|” – jeżeli chcemy, aby wartość przesłana z widoku była wyświetlona w oczekiwanej przez użytkownika postaci należy tą wartość odpowiednio skonwertować. Idealnym rozwiązaniem w Aurelii jest użycie konwerterów wartości (value converter).
    export class App {
       upperVersion = '';
    }
    export class ToUpperValueConverter {
       toView(value) {
          return value.toUpperCase();
       }
    }
    
    <template>
       <div>
          <input value="${upperVersion | toUpper}">
       </div>
    </template>

    W stosunku do przykładu z punktu 1, dodałem tylko prostą klasę konwertera wykorzystującą funkcję toUpperCase() z biblioteki jQuery oraz modyfikację bindingu inputa.

  4. Zachowania to kolejny sposób służący do sterowania bindingiem i podobnie do konwerterów wartości możemy wstawiać je do potoku w interpolowanym stringu, ale zamiast „|” użyjemy „&”:
    Wyróżniamy następujące zachowania: throttle, debounce, updateTrigger, signal i oneTime. Więcej o zachowaniach bindingu napiszę w kolejnym poście, a tymczasem przedstawię ideę działania na jednym z nich – signal, które wysyła sygnał o potrzebie odświeżenia wartości w kontrolce. Poniższy przykład – chociaż nie najwyższych lotów – powoduje wyświetlenie aktualnej sekundy, po wciśnięciu buttona, który wysyła sygnał. Można oczywiście to zrobić na samym onclicku buttona bez wysyłania sygnału, ale wtedy nie byłoby prezentacji tego jak działa zachowanie.

    <template>
       <require from="bootstrap/css/bootstrap.css"></require>
       <div class="container">
          <div>
             <label>${null| toSeconds & oneTime & signal: 'test-signal' }</label>
             <button click.trigger="testSignal()">Send signal</button>
          </div>
       </template>
    
    import {inject} from 'aurelia-framework';
    import {BindingSignaler} from 'aurelia-templating-resources';
    @inject(BindingSignaler)export class App {
       constructor(signaler)
       {
          this.signaler = signaler;
       }
       testSignal()
       {
             this.signaler.signal('test-signal');
       }
    }
    
    export class ToSecondsValueConverter {
       toView() {
          return new Date().getSeconds();
      }
    }
  5. @observable – użycie tego dekoratora pozwala rozpoznawać zmiany wartości zmiennej, a do tego można połączyć to z fajnym, automagicznym mechanizmem Aurelii, który po zmianie wartości zmiennej wywołuje na niej funkcję [nazwa_zmiennej]Changed, jeżeli taka funkcja istnieje. W moim przykładzie jest to testChanged. Nigdzie nie jest jawnie wywoływana, a jednak robi to co trzeba.
    <template>
       <input type="text" value.bind="test">
       <label>${repeatText}</label>
    </template>
    
    import {observable} from 'aurelia-framework';
    export class App {
       @observable test = '';
       repeatText = '';
       testChanged(newVal){
          this.repeatText = newVal;
       }
    }

Leave a Reply

Your email address will not be published. Required fields are marked *