Olet jo tutustunut tietosidonnan perusmuotoihin. Tarkastellaan nyt, miten niitä käytetään käytännössä TaskComponent-komponentin kanssa työskenneltäessä.

Tehtävän rakenne

Tehtäväkomponentti näyttää tehtävän otsikon sekä kaksi painiketta: toisen tehtävän tilan vaihtamiseen (tilasta "Valmis" tilaan "Peru") ja toisen tehtävän poistamiseen. Tässä on käytettävä HTML-rakenne:

Tyylit on jo määritelty. Voit tarkastella niitä siirtymällä tiedostoon style.css.

Komponentin toteutus

Komponenttimme käsittelee tehtävä-oliota, joka tallentaa tietoja tehtävästä, kuten sen id, title ja completed-tila. Määrittelemme tämän olion komponenttiluokan sisällä:

export class TaskComponent {
  task = { id: 1, title: 'Buy groceries', completed: false };
}

Voimme näyttää nämä tiedot komponentin HTML-mallissa.

Komponentin datan käyttäminen mallissa

Näyttääksemme tietoja task-oliosta viittaamme suoraan sen ominaisuuksiin mallissa. Esimerkiksi tehtävän otsikon näyttäminen:

<div class="task-title">{{ task.title }}</div>

Jos tehtävä on suoritettu, painikkeen tekstin tulisi muuttua. Voimme käyttää ternäärioperaattoria säätääksemme painikkeen tekstiä task.completed -arvon perusteella.

<button class="complete">
  {{ task.completed ? 'Undo' : 'Complete' }}
</button>

Jos task.completed on true, painikkeessa näytetään "Undo", muussa tapauksessa "Complete". Näin painikkeen teksti mukautuu dynaamisesti task-olion nykytilan mukaan.

Dynaamisten luokkien lisääminen ominaisuussidonnalla

Seuraavaksi lisätään mahdollisuus muuttaa tehtävän ulkoasua sen tilan perusteella. Käytetään ominaisuussidontaa CSS-luokan ehdolliseen lisäämiseen:

<div class="task" [class.completed]="task.completed">

Tämä tarkoittaa: jos task.completed on true, completed-luokka lisätään elementtiin. Muussa tapauksessa luokkaa ei lisätä.

Kun tehtävä on merkitty valmiiksi, ulkoasu muuttuu: teksti yliviivataan, väri muuttuu harmaaksi ja tausta vaaleanharmaaksi. Kaikki nämä tyylit on määritelty .completed CSS-luokassa, jonka olen esitellyt aiemmin.

Tapahtumien sitominen painikkeisiin

Seuraavaksi sidotaan tapahtumat painikkeisiin, jotta oikeat toiminnot suoritetaan, kun painikkeita klikataan. Meillä on kaksi painiketta:

• "Valmis" / "Peru" -painike — kun sitä klikataan, tehtävän valmistumistila vaihtuu;

• "Poista" -painike — kun sitä klikataan, tehtävä poistetaan.

Tätä varten luodaan kaksi metodia TaskComponent-komponenttiin:

deleteTask() {
  // Method to delete the task. We'll implement it later.
}

toggleTask() {
  // Toggles the value of task.completed.
  this.task.completed = !this.task.completed;
}

• deleteTask()-metodi jätetään toistaiseksi tyhjäksi, koska meillä ei vielä ole tehtävälistaa, josta poistaa tehtäviä;

• toggleTask()-metodi vaihtaa yksinkertaisesti task.completed -arvon. Jos tehtävä on merkitty valmiiksi (true), se merkitään keskeneräiseksi (false) ja päinvastoin.

Nyt, jotta nämä metodit toimivat painikkeiden painalluksissa, meidän täytyy sitoa ne painikkeiden klikkaustapahtumiin. Käytämme tapahtumasidontaa (click-tapahtuma) kuunnellaksemme painikkeiden klikkauksia ja kutsuaksemme vastaavia metodeja.

Tässä esimerkissä tapahtumasidonta mahdollistaa käyttäjän toimien yhdistämisen komponentin metodeihin. "Valmis" / "Peru" -painike kutsuu toggleTask()-metodia, joka vaihtaa task.completed-tilan. Tämä muuttaa myös painikkeen tekstin "Valmis"-tilasta "Peru"-tilaan tehtävän tilan mukaan.

"Poista"-painike kutsuu deleteTask()-metodia, jota ei ole vielä toteutettu, sillä tehtävän poisto lisätään myöhemmin.

Nyt olemme toteuttaneet yksinkertaisen tehtäväkomponentin mallipohjan kokonaan. Tässä on, miltä komponentti näyttää:

Komponentti tarjoaa datan ja malli (template) vastaa visuaalisesta esityksestä. Yhdessä ne muodostavat vuorovaikutteisen ja käyttäjäystävällisen tehtävärajapinnan, jossa data näytetään, ulkoasu muuttuu ja painikkeet mukautuvat tehtävän tilan mukaan.