Toto je druhá část aplikace Naučte se budovat objektově orientovanou aplikaci JavaScript pomocí série tříd ES6. Na první díl se můžete podívat zde. V celé sérii vytvářím aplikaci Address Book 📕, která demonstruje koncepty, jako je objektová orientace s ES6, MVC a další osvědčené postupy při vytváření aplikace založené na JavaScriptu.
Zde je řada aplikací Address Book
01 Adresář – Získat všechny kontakty
02 Adresář – Získejte kontakt
03 Adresář – Přidat kontakt
04 Adresář – Odebrat kontakt
05 Adresář – Upravit kontakt
Co je obsahem tohoto článku?
- Jak přidat událost kliknutí do každé položky seznamu kontaktů.
- Jak zobrazit podrobné kontaktní údaje vpravo, což je zobrazení modulu podrobností, po kliknutí na li.
- Jak zobrazit první položku kontaktu v zobrazení modulu podrobností při načtení opakovaným použitím metody i aktivního stavu.
- Jak získat aktivní stav po kliknutí na položku seznamu.
Pojďme přidat HTML kód modulu kontaktních údajů do souboru index.html.
<!-- contact item details module -- >
<section>
<div id="contact-item-details">
loading...
</div>
</section>
Poté se vraťte na app.js a přidejte posluchač událostí do li prvek uvnitř renderContactListModule() před připojením li do ul na AddressBookView třída.
$li.addEventListener("click", this.renderContactDetailsModule);
Jak vidíte, když li po kliknutí renderContactDetailsModule() bude vyvolána metoda. Vytvořme tuto metodu v AddressBookView třída také.
renderContactDetailsModule(e) {
// code goes here
}
Uvnitř renderContactDetailsModule() metodou, získám vybranou hodnotu indexu pomocí parametru (e) .
let selectedIndex = null;
if (typeof e === 'object') {
e.stopPropagation();
selectedIndex = this.getAttribute('data-index')
} else {
selectedIndex = e;
}
Deklaroval jsem proměnnou selectedIndex a nastavte jej na null jako jeho počáteční hodnota. Tato proměnná bude později uchovávat vybranou hodnotu indexu.
Dále mám podmínku if, ve které používám metodu typeof k určení způsobu vyvolání renderContactDetailsModule().
Pokud je renderContactDetailsModule() vyvoláno událostí click, e by byl objekt. V tom případě mohu získat vybrané li hodnotu indexu z atributu data-index, který je přidán ke každému li v renderContactListModule() a přiřadit k selectedIndex .
Pokud je parametr e objekt, musíme použít e.stopPropagation(), abychom se vyhnuli bublání událostí.
Pokud e není objekt, můžeme jednoduše přiřadit hodnotu e na selectedIndex jako by to bylo celé číslo. Později uvidíme, kde můžeme zavolat tuto metodu předáním hodnoty indexu jako argumentu.
Přidejme metodu getContact() do naší třídy AddressBookCtrl.
// AddressBookCtrl class
getContact(index) {
return contactsData[index];
}
Metoda getContact() obdrží číslo indexu jako parametr a vrátí jediný objekt kontaktu z pole ContactData na základě hodnoty indexu, kterou předáme jako argument.
Nyní můžeme použít getContact() uvnitř metody renderContactDetailsModule() k získání vybraného objektu kontaktu předáním selectedIndex.
const selectedItem = addressBookApp.getContact(selectedIndex);
Nyní potřebuji získat modul kontaktních údajů a uložit jej do mezipaměti.
const $ContactItemUI = document.getElementById('contact-item-details');
Nakonec přiřaďte naformátovaný řetězec prvku DOM pomocí jeho vlastnosti innerHTML. Jak vidíte, používám některé funkce ES6. Jedním z nich je backtic, který se používá na začátku a na konci řetězce, což umožňuje vytvoření víceřádkového řetězce. Dalším je formát ${}, který nám umožňuje přidávat proměnné do řetězce neboli interpolace řetězce.
$ContactItemUI.innerHTML = `${selectedItem['fname']} <br> ${selectedItem['lname']} <br> ${selectedItem['phone']} <br> ${selectedItem['email']}`;
Pojďme přidat nějaký CSS kód do souboru style.css pro modul kontaktních údajů.
/* Contact Item Details Module */
#contact-item-details {
float: left;
width: 200px;
background: #333;
overflow: auto;
color: white;
padding: 10px;
margin-left: 1px;
}
V této fázi budete moci vidět data modulu s podrobnostmi vpravo po kliknutí na prvek li. Chci však při načtení zobrazit první položku obsahu indexu v modulu podrobností.
Abych to udělal, zavolám metodu renderContactDetailsModule() (s argumentem 0, který by byl první položkou kontaktu) uvnitř metody init() ve třídě AddressBookView.
this.renderContactDetailsModule(0);
li Aktivní stav
Pojďme přidat CSS třídu .active do souboru style.css.
li:hover, .active {
background: rgba(0, 0, 0, 0.5);
}
Jak můžete vidět, přidal jsem třídu .active do existujícího pravidla CSS odděleného čárkou.
Vraťme se k app.js a deklarujeme metodu hightlightCurrentListItem() uvnitř třídy AddressBookView. Tato metoda vezme jako parametr hodnotu selectedIndex.
Poté pomocí document.getElementByClassName získejte pole prvků li DOM a uložte je do $ContactListItems.
Poté projděte prvky DOM a odstraňte třídu .active z každého prvku li, pokud nějaký existuje.
Nakonec přidejte do prvku clicked li třídu .active, kterou lze určit pomocí hodnoty selectedIndex v poli $ContactListItems DOM.
hightlightCurrentListItem(selectedIndex) { const $ContactListItems = document.getElementsByClassName('contact-list-item'); for (let i = 0, len = $ContactListItems.length; i < len; i++) { $ContactListItems[i].classList.remove('active'); } $ContactListItems[selectedIndex].classList.add("active") }
Vyvoláme metodu hightlightCurrentListItem() uvnitř renderContactDetailsModule() předáním proměnné selectedIndex jako argumentu.
To je ono.
V této fázi
- Je vybrána první položka seznamu z modulu Seznam kontaktů a má také aktivní stav.
- Údaje první položky kontaktu se zobrazí v modulu podrobností kontaktu vpravo.
- Na položku seznamu kontaktů lze kliknout a vše by mělo fungovat podle očekávání jako na snímku obrazovky.