Výukový program MVC JavaScript pomocí třídy ES6 – část 02

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

  1. Je vybrána první položka seznamu z modulu Seznam kontaktů a má také aktivní stav.
  2. Údaje první položky kontaktu se zobrazí v modulu podrobností kontaktu vpravo.
  3. Na položku seznamu kontaktů lze kliknout a vše by mělo fungovat podle očekávání jako na snímku obrazovky.