Template - GunnarThorunnarson/FORR3JS05DU GitHub Wiki

State Based UI

Staða (state) eru gögn á ákveðnum tímapunkti, þe. núverandi staða á gögnunum þínum. Þú notar JavaScript til að búa til DOM byggt á núverandi gagnastöðu. Út frá gögnum þá á DOM að líta ákveðið út. Síðan er uppsetning (layout) uppfærð (render) í html. Sjá nánar State based UI vs. manual DOM manipulation ásamt kóðadæmi.

Með state-based UI nálgun þurfum við þrjá hluti:

Data object, þar sem við geymum gögnin okkar. Ath. gera skal ráð fyrir að gögnin geta breyst (dynamískt).
```
let data = {
   listItems: [ 'Veterinarian', 'Beach Bum', 'Web Developer' ]
};
```
Template þ.e. hvernig viðmót (UI) á að líta út byggt á mismunandi stöðu gagna. Template er fall sem vinnur með gögn og skilar markup streng.
Fall til að rendera template í DOM (html síðu).

Sýnidæmi

1. String concatenation + innerHTML

const headingText = 'I am a heading!';
const markup = '<div><h1>' + headingText + '</h1></div>';

// eða ...

const markup = 
  '<div>' +
    '<h1>' + headingText + '</h1>' +
  '</div>';

document.body.innerHTML = markup;

Ath. Þegar unnið er með InnerHTML og inntak frá notanda þá þarf að koma í veg fyrir XSS árásir með nota sanitizer fall eins og DOMPurify.

2. Template literals + innerHTML

const headingText = 'I am a heading!';
const markup = `
    <div>
        <h1> ${headingText} </h1>
    </div>
`;

document.body.innerHTML = markup;

3. Nested Template literals + map + join + innerHTML

const dogs = [
    { name: 'Snickers', age: 2 },
    { name: 'Hugo', age: 8 },
    { name: 'Sunny', age: 1 }
];

/*  
  map skilar fylki. 
  join aðferð býr til streng úr stökum í fylki. 
*/
const markup = `
    <ul class="dogs">
        ${dogs.map(dog => `<li> ${dog.name} is ${dog.age * 7} </li>`).join('')}
    </ul>
`;

document.body.innerHTML = markup;

Sjá nánari kóðaskýringar á .join() og Templating html with template strings

4. Template literals + map + Ternary + innerHTML

Það er ekki hægt að nota if í template literals en það er hægt að nota ternary.

let wizards = ['Hermione', 'Neville', 'Gandalf', 'Radagast'];
let showHeading = true;
let markup = `
    ${showHeading ? '<h1>Awesome Wizards</h1>' : ''}
	<ul>
		${wizards.map( wizard => { return `<li>${wizard}</li>`; } ).join('')}
    </ul>
`;
    
document.body.innerHTML = markup;

5. Template literal + data object + function + innerHTML

const person = {
    name: 'Gunnar',
    position: 'teacher',
    courses: ['JS', 'HTML', 'CSS']
}

const markup = `
 <div class="person">
    <h3>${person.name}</h3>
    <p>${person.position}</p>
    <ul>
        ${tempList(person.courses)}
    </ul>
 </div>
`;

function tempList(arr) {
    return arr.map( item => { return `<li>${item}</li>`; } ).join('');
}

document.body.innerHTML = markup;

6. createElement + append

const headingText = 'I am a heading!';
const container = document.createElement('div');
const heading = document.createElement('h1');
const content = document.createTextNode(headingText)

heading.append(content);
container.append(heading);
document.body.append(container);

Sjá einnig append vs appendChild

7. createElement API + template literal + map

// Data object
let data = {
	products: [ { item: 'Vara 1', price: 1000 }, { item: 'Vara 2',  price: 9000 } ]
};

// data er array með item og price
function template(data){
    let ulNode = document.createElement('ul');
    let nodes = data.map(obj => {
    	let li = document.createElement('li');
    	li.textContent = `${obj.item}: ${obj.price} kr.`;
    	return li;
    });
    ulNode.append(...nodes) // Bætum li við ul með append og spread syntax.
    document.body.append(ulNode); // Birtum lista í html.
}
template(data.products);

Sjá nánar Rest parameters and spread syntax

8. DocumentFragment

Hægt er að nota document fragments (sem eyðist eftir notkun) í stað þess að búa til div element sem ílát (e. container).

let fruits = ['Apple', 'Orange', 'Banana', 'Melon']
let fragment = new DocumentFragment() // document.createDocumentFragment();

fruits.forEach(function (fruit) {
  let li = document.createElement('li')
  li.textContent = fruit
  fragment.append(li)
})

document.body.prepend(fragment);

Sjá nánar DocumentFragment

Ítarefni How to create a state-based UI component