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

Tehtävän rakenne

Tehtäväkomponentti näyttää tehtävän otsikon sekä kaksi painiketta: toisen tehtävän tilan vaihtamiseen ("Valmis" → "Peruuta") 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 sen ominaisuuksiin suoraan mallissa. Esimerkiksi tehtävän otsikon näyttämiseksi:

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

Jos tehtävä on suoritettu, painikkeen tekstin tulee 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 nykytilaan.

Dynaamisten luokkien lisääminen ominaisuussidonnalla

Lisätään nyt mahdollisuus muuttaa tehtävän ulkoasua sen tilan perusteella. Käytämme ominaisuussidontaa (property binding) 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ä.

Tämän seurauksena, 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

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

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

• "Poista" -painike — kun sitä napsautetaan, 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 kohteita;

• 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. "Complete" / "Undo" -painike kutsuu toggleTask()-metodia, joka vaihtaa task.completed-tilan. Tämä muuttaa myös painikkeen tekstin "Complete"-tilasta "Undo"-tilaan tehtävän tilan mukaan.

"Delete"-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 kokonaisuudessaan. Tässä on, miltä komponentti näyttää:

Komponentti tarjoaa datan ja malli (template) tarjoaa visuaalisen esityksen. Yhdessä ne muodostavat interaktiivisen ja käyttäjäystävällisen tehtäväkäyttöliittymän, jossa data näytetään, ulkoasu muuttuu ja painikkeet mukautuvat tehtävän tilan mukaan.