riot observable test

by jpeter06

HTML

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

<script type="riot/tag">
<app0 class="app">
    <component  nom="c1" oye="c2"/>
    <component  nom="c2" oye="c3"/>
    <component  nom="c3" oye=""/>
</app0>
<app1 class="app">
    <component  nom="c4" oye="c5"/>
    <component  nom="c5" oye=""/>
    <component  nom="c6" oye="c5"/>
</app1>
<app2 class="app">
    <component  nom="c7" oye=""/>
    <component  nom="c8" oye=""/>
</app2>
</script>


<script type="riot/tag">
<controler_info class="controler">
    <p><b>controler_info:</b> 
        <button onclick={changePage}>changePage</button>
        <button onclick={sendEvent}>sendEvent</button>
        componentes:
        <select id="componente">
            <option each={ item, i in opts.gestor.components } value={item.getId()}>
                { item.opts.nom }
            </option>            
        </select>
    </p>
    <div>mounted: {opts.gestor.components.length}</div>
    <div>ID last mounted: {opts.gestor.lastMounted}</div>
    <div>ID last unmounted: {opts.gestor.lastUnmounted}</div>
    <div>call responses: {opts.gestor.counter}</div>
    
    var self=this;
    this.page=0;
    opts.gestor.on('mod', function() {
    // console.log('controler...'+self._id);
       self.update();
      })
    
    changePage(){
    		this.page=(this.page+1)%3;
        console.log(this.page);
        riot.mount("main","app"+this.page);
    }
    
    sendEvent(){
        opts.gestor.sendEvent(this.componente.value);
    }

</controler_info>
    
    // COMPONENT: 
    // act: actualizamos this.titulo y enviamos info de que nos hemos actualizado
    // desmontar: pues eso nos desmontamos
<component class="component">
    <button onclick={actualizar}>act</button>
    <button onclick={desmontar}>unmount</button>
    <button onclick={pedir}>pedir</button>
    <span>{opts.nom} val:{cont} id:{this.getId()} {opts.oye?' oye a:'+opts.oye:''}...

CSS

html,body{
    width:100%;
    height:100%;
    padding:0px;
    margin:0px;
}

.app{
    display:block;
    width:100%;
}

.component {
    display:inline-block;
    width:100%;
    background:turquoise;
}

.controler{
    display:inline-block;
    width:100%;
    background: #eee;
}

JavaScript

/////////////////////////////////////7
//MIXIN funciones comunes para los componentes principales.
var gestorMixin = {
    //INIT: nos registramos para controlar mount, unmount
    init: function() {
      this.on('mount', function() { 
          this.isMounted=true;
          gestor.addComponent(this);
      });
        
      this.on('unmount', function() { 
          this.isMounted=false;
          gestor.removeComponent(this);
      })
      
       this.on('update', function() { 
           gestor.log('updated: '+this._id);
       })
    },
    
    //PEticiones al servidor (simulado)
    /*
    call:function(){
        console.log("call from :"+this.opts.nom);
        $.ajax({
            url:"/echo/json/",
            data:{json: JSON.stringify(
            {num:Math.round(Math.random()*10)}),
          delay: 3},
            type:"POST",
            success:function(response)
            {
               console.log(response);
            }
        });

    },*/
    ///////
    //Petición asincrona al Server. Controlamos la respuesta
    //asegurandonos que el objeto esta montado!
    call:function(params, funct){
        console.log("call from :"+this.opts.nom);
        $.ajax({
            url:"/echo/json/",
            data:{json: JSON.stringify(params),
               delay: 2},
            type:"POST",
            success:function(response)
            { funct(response); gestor.incCounter();},
            error: function () { alert("error"); }
        });

    },
    //Informo y mando info relevante.
    sendInfo:function(obj,datos){
        gestor.sendInfo(obj,datos);
    },
    getId:function(){
        return this._id;
    },
    
    infoRecibida:function(origen,datos){
        console.log("infoRecibida desde:"+origen.getId());
    }

}

/////////////////////////////
//GESTOR Lo llamamos desde el MIXIN
var gestor = new function() {
    riot.observable(this); //Para recibir y mandar eventos.
    
    this.components = [];
    this.counter=0;
   ...