an ee.startup

what is genes.zone?

contact telegram twitter
genes:one
UI

Observable Objects

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 an ajax call.
Oh, wow, the last sentence felt a little nerdy.

You may need this when there are frequently updated parts of the app.
With data coming from websockets or data pulled every couple of seconds from the backend.

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.

Radius m
Height m
Volume
0
m3

Here is the code for it.


  <input type="number" class="radius" min="1" max="10" value="0" onchange="calc_vol();">
  <input type="number" class="height" min="1" max="100" value="0" onchange="calc_vol();">
  <h5 class="volume dib valb">0</h5>


        

  // this is the very simple function bound to the observable value.
  // this function defines the action to be done when "cylinder.v" is changed.
  g.oo("cylinder.v", function () {
	g.el("h5.volume").innerHTML = g.get("cylinder.v");
  });

  // this is to get changed values form inputs, when triggered, only the bound value "cylinder.v" changes.
  var calc_vol = 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
  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);


      
×

Contact NodOnce : Say Something!