Front-end Front-end
Probíhá výprodej HTML, JavaScript a Bootstrap. Slevy až 80 %
Vyšlehej si extra vědomosti! Až 100% bodů na prémiový obsah zdarma! Více zde

Diskuze: šablonovací jazyk?

Aktivity (2)
Avatar
filipfr
Člen
Avatar
filipfr:1.11.2018 16:28

Ahoj, já přesně nevím, jak se zeptat a tudíž ani jak formulovat "how to..." do googlu. Pomocí js dynamicky generuju elementy na základě dat z Firebase. Jeden jednoduchý element vypadá asi takto:

snapshot.forEach(function (snapshotMenu) {
            var typ = snapshotMenu.child("typ").val();
            var dodatek = snapshotMenu.child("v").val();
            var pozn = snapshotMenu.child("pozn").val();
            var novaPolozka = document.createElement("div");
            novaPolozka.className = "w3-border";
            var textPolozky = document.createElement("div");
            textPolozky.className = "w3-container w3-padding";
            var harmonika = document.createElement("div");
            harmonika.className = "w3-hide w3-small w3-container";
            if (typ == "E") {
                textPolozky.className += " w3-pink";

            } else if (typ == "W") {
                textPolozky.className += " w3-yellow";

            } else if (typ == "G") {
                textPolozky.className += " w3-grey w3-large";

            } else {
                textPolozky.className += " w3-white";
            }
            textPolozky.innerHTML = snapshotMenu.child("t").val();
            if (dodatek != null) {
                var vpravo = document.createElement("div");
                vpravo.innerHTML = dodatek;
                vpravo.className = "w3-right";
                textPolozky.appendChild(vpravo);
            }
            novaPolozka.appendChild(textPolozky);
            modul.appendChild(novaPolozka);

A takových nesmyslů budu mít v aplikaci desítky. Vím(nebo spíš tuším), že existují nástroje, jak si vzhled nadefinovat pomocí (jako)html a pak tam jen "dotlačit" data. Nevím ale vůbec, co hledat. Můžete mi někdo poradit, ideálně s linkem na nějakej tutoriál. Používám čistý js a sháním se po nástroji co nejjednodušším na naučení.
Díky

Chci docílit: Snažím se dosáhnout jednoduššího kódu.

 
Odpovědět 1.11.2018 16:28
Avatar
Odpovídá na filipfr
Vladislav Ladicky:1.11.2018 17:50

Vue. Začni s Vue guide na ich stránke. Ak už JS poznáš, bude ti to hneď dávať zmysel a uvidíš, aké je to úžasne jednoduché a prehľadné. A keby nejaký problém, napíš sem, poradím.

 
Nahoru Odpovědět 1.11.2018 17:50
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:2.11.2018 7:57

google = render engine php
google = render engine js
Jestli chces neco vlastnimi silami...

Naco jednoducheho, treba toto

<script>
// funkce escapeHtml(str)...
var str, data, i;
str = '\
<img src="{0}" alt="{1}" onclick="{2}">\
';
data = ['http://', 'obrazek.gif', 'alert("obrazek.gif")' ]
i = 0;
// (cyklus)
str = str.replace('{'+i+'}', escapeHtml(data[i])); // lepsi tam dat new RegExp kvuli opakovanemu nahrazeni
alert(str);
</script>
Editováno 2.11.2018 7:59
 
Nahoru Odpovědět 2.11.2018 7:57
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.