Number Saver: Riot.js Observable Example

index.html

<grozmite></grozmite>
<hr>
<groz-len></groz-len>
<script type="riot/tag">
  <grozmite>
    <button onclick={generate}>Generate a new number</button>
    <h1 name="showhere" onclick="{clearMe}">{ arbitrary_number }</h1>
    <button onclick={saveme}>Save this number</button>
    
    this.generate = function() {
      this.arbitrary_number = Math.floor(Math.random()*10000);
     };
    this.saveme = function() {
      zzzz.trigger('saveme',this.arbitrary_number)
     };
    
  </grozmite>
</script>
    
<script type="riot/tag">
  <groz-len>
    <p name="">I like { zzzz.numbers_i_like.length } numbers. </p>
    <button onclick={clearList}>Clear List</button>
    <virtual each={zzzz.numbers_i_like}><div>{itis}</div></virtual>
		
    this.clearList = function() {zzzz.numbers_i_like = []}
    zzzz.on('saveme', function(indata){    
    		zzzz.numbers_i_like.push({itis: indata});
        this.update()
        }.bind(this)
  )
  </groz-len>
</script>

number-saver-riot-js-observable-example.markdown

Number Saver: Riot.js Observable Example

Simple example of riot.js observables at work

A Pen by rhysallister on CodePen.

License.

script.js

  var zzzz = riot.observable()
  zzzz.numbers_i_like = []
  
  riot.mount('grozmite');
  riot.mount('groz-len');

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.3.2/riot+compiler.min.js"></script>