NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
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

Člen
Avatar
Odpovídá na filipfr
: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.