Template - GunnarThorunnarson/FORR3JS05DU GitHub Wiki

State Based UI

Þú notar JavaScript til að búa til DOM (HTML & CSS) 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.

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).

Sjá nánar State based UI vs. manual DOM manipulation ásamt kóðadæmi. Og How to create a state-based UI component

Sýnidæmi

1. String concatenation + innerHTML

// Data
const headingText = 'I am a heading!';
// Template
const markup = '<div><h1>' + headingText + '</h1></div>';
// Render
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

// Data
const headingText = 'I am a heading!';
// Template
const markup = `
    <div>
        <h1>${headingText}</h1>
    </div>
`;
// Render
document.body.innerHTML = markup;

3. Nested Template literals + map + join + innerHTML

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

// Template
// Array.map býr til array, Array.join býr til streng úr items í array og tengir þá saman í einn streng. 
const markup = `<ul class="dogs">${dogs.map(dog => `<li>${dog.name} is ${dog.age * 7}</li>`).join('')}</ul>`; 

// Render
document.body.innerHTML = markup;

Sjá nánar .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.

// Data
let wizards = ['Hermione', 'Neville', 'Gandalf', 'Radagast'];

// State
let showHeading = true;

// Template
let markup = `
  ${showHeading ? '<h1>Awesome Wizards</h1>' : ''}
  <ul>${wizards.map( wizard => { return `<li>${wizard}</li>`; } ).join('')}</ul>
`;

// Render    
document.body.innerHTML = markup;

5. Template literal + data object + function + innerHTML

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

// Template
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('');
}

// Render
document.body.innerHTML = markup;

6. createElement + append

// Data
const headingText = 'I am a heading!';

// Template
const container = document.createElement('div');
const heading = document.createElement('h1');
const content = document.createTextNode(headingText);
heading.append(content);
container.append(heading);

// Render
document.body.append(container);

Sjá einnig append vs appendChild

7. createElement API + template literal + map

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

// Template 
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 (turns array into a list of arguments)
    return ulNode;
}
let tmpl = template(data.products);

// Render
document.body.append(tmpl); // Birtum lista í html.

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).

// Data
let fruits = ['Apple', 'Orange', 'Banana', 'Melon'];

// Template
let fragment = new DocumentFragment() // document.createDocumentFragment();
fruits.forEach(function (fruit) {
  let li = document.createElement('li');
  li.textContent = fruit;
  fragment.append(li);
})

// Render
document.body.prepend(fragment);

Sjá nánar DocumentFragment