Documentation

Genes?
UI Framework
API Framework
B. Genes.JS

5. Events, Triggers & Observables

Events are easy...

The "click", "submit", "change" events are already listened as a default.
So any function you set to them are immediately triggered.

            
    // this is a simple on click trigger, could be any css selector
    g.on("click", ".something" ,function () {
        // some function will be called...
    });

    // this is a simple on submit trigger, could be any css selector, or you can set it to all forms
    g.on("submit", "form" ,function () {
        // some function will be called...
    });

    // this is a simple on change trigger, could be any css selector
    g.on("change", ".some-input" ,function () {
        // some function will be called...
    });

        

But if you want some other custom events to listen to, just set them yourself.

            
    // this is a simple on click trigger, could be any css selector
    g.onv("keyup", ".keyupinput" ,function (event) {
        g.cl(event.target.value);
    });

        
And now, here we get a little nerdy...

Observable objects and two-way data-binding, digest cycles, reactive cyclic dependencies between computeds, BLAH, NO! Sorry, can not be nerdy with this one either.

Most of the time what any one needs is that the web page/app is updated,
when you silently pull the new updated data from the API via a basic ajax call.
Oh, wow, the last sentence felt somewhat a little nerdy.

You may need this when there are frequently updated parts of the app.
With data coming from websockets (soon with genes.js) or data pulled every couple of seconds from the backend (this we have).

As two-way data binding is weird, we'll focus on one-way data-binding.

Let's say you have a right cylinder that you want to calculate the volume for.
We don't know why, but still, we're your friend and we'll go along with it.
Just change the values below, and you're done.

Formula:

Here is the code for it.


    <div class="bob1 mb1r"><b class="dib fs2r vat" style="line-height: 2.6rem;">Formula:</b><img class="h3r" src="./ui/assets/img/cylinder-volume.png"></div>
    <img class="w-13r dib bor1 pr1r mr1r" src="./ui/assets/img/cylinder.png">
    <div class="w12r dib calc">
        <label class="fw">Radius: <input type="number" class="radius w5r" min="1" max="10" value="0"><b class="valb"> m</b></label>
        <label class="fw">Height: <input type="number" class="height w5r" min="1" max="100" value="0"><b class="valb"> m</b></label>
        <label class="fw">Volume: <h5 class="volume dib valb">0</h5><h5 class="dib valb">m<sup>3</sup></h5></label>
    </div>
        

    // this observable object is triggered when the value "cylinder.v" is set in any way.
    // you can even set it via console and see: g.set("cylinder.v", 34535);
    g.oo("cylinder.v", function () {
        g.el("h5.volume").innerHTML = g.get("cylinder.v");
    });

    // if any of these objects changed, the calculation is re-made.
    // and the value is set to "cylinder.v"
    g.on("change", ".radius, .height", function () {
        var r = g.el(".radius").value;
        var h = g.el(".height").value;
        var v = (3.14 * r * r * h).toFixed(2);
        g.set("cylinder.v", v);
    });
        
Now, let's make a simple clock.

This is a very basic clock, that shows the time, and is updated every second.


    // this is the place where as timer variable changes html is rendered.
    // you bind a function to the observable object variable, if "timer" is set...
    g.oo("timer", function () { g.el("h5.time").innerHTML = g.get("timer"); });

    // this is just a basic setInterval shortcut,
    // in which inside runs a "now" time function and sets it to timer variable
    g.si("timer", function () { g.set("timer", g.now(null, true)); }, 1000);
    

You want more?

Unminified and unmerged code base? Seeing backlog, having a say in the future of Genes?
Buying & selling custom Genes mods & clones at the store? Being a part of the community?

Good old-fashioned downloads. Nightly updates. Detailed Q&A, in-depth usage tips & tricks. You are a designer, a custom theme-builder? You'll see that this is the easiest you create themes. Both admin and frontend is customized. So now, your themes can easily have custom admin panels too. And by custom I mean "CUSTOM"! Without being tortured you can create a comp, mod or clone or theme and sell that. Be a part of this community, to learn what the hell a comp, mod or clone is?! Many freebies, custom barebone / skeleton templates. Discounts. Easy recipes. Third party integrations. Saving time. Making money. Interacting. Contributing. Benefiting. Me. Just become a member. Really, I love you.

Authentication
User Management
Quick Login
Performance
Optimised DB
Modular
Upload & Use
Content Management
Blog / CMS
Landing Page
i18n
SEO Optimised
Tag, Filter, Search
Lightweight
Genes Premium Bundle

"Early Adopters Phase"
- 50% Discount -

Quota Left: 248 of 250

€199.90

€99.90

All Inclusive! No Hidden Costs!
Paid Once! No Subscription!
  • What you're getting!?
    • A .zip file bundle of everything.
    • FTP Uploads! Real Indie Maker Life!
      Control Over Your Data and Code!
      And...
    • 4 Sample HTML Templates with Sub-Pages
      • Admin
      • Blog
      • Corporate
      • Landing
    • 4 Sample UI Color Themes
      • Academic
      • Corporate
      • Darko
      • Hip
    • 4 Sample Production Ready Clones:
      Just upload and start using.
      • Multilingual Dynamic No-DB Landing Page
      • A Multi-User Blog
      • An API Backend
      • Almost-Ready Index Something SaaS
        with Stripe Payments and Google Login
    • 6 Useful Mods:
      Pick all you need.
      • Self-Hosted SMTP Mailer Integration
      • Self-Hosted Form / Data Management
      • Self-Hosted GDPR-Ready Analytics!
      • Brevo Transactional Mail Integration
      • Firebase Google Login Integration
      • Stripe Payment Integration
    • Membership to Genes X Community & X Chat Group.
    • Access to the Genes Private Repository on Github.
    • Add Your SaaS / Blog / Website / Landing Page to the Showcase.
    • Work in progress:
      • More templates!
      • More themes!
      • More mods!
      • More sample clones!
      • Training a ChatGPT Agent, GenesGPT, soon...
      • Having a say in the backlog, soon...
      • Updates and more to come, soon...
      • Possibility to sell clones, mods and themes you created, in the Store, soon...