Taeluf.com

trash-bin.html

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

<script type="text/javascript" src="../../code/Autowire.js"></script>

<style>
.result {
    min-width:300px;
    min-height:200px;
    border: 4px solid blue;
}

.TrashBucket {
    min-width:300px;
    min-height:200px;
    border: 4px solid red;
}
</style>


<script type="text/javascript">


    class Result extends Autowire {
        get trash(){ return this.g('TrashBin') }

        onReady(){
            // console.log('trash');
            // console.log(this.trash);
            this.trash.put(this.innerHTML);
            //this.trash[0] works too,
            this.innerHTML = "<h1>The HTML has been updated automatically during attach.</h1>"
                + "<p>I'll be updated by the button</p>";
            GenP.autowire('p');
        }
    }
    //any css selector is valid
    Result.autowire('div.result');

    class GenP extends Autowire {
        get trash(){return this.g('TrashBin');}

        updateCount(newCount){
            this.trash.put(this.innerHTML);
            this.innerHTML = "New Count: "+newCount;
        }
    }



    class Updater  extends Autowire {
        count = 0;
        get para(){return this.g('GenP');}

        onclick(){
            this.para.updateCount(this.count++);
        }
    }
    //automatically wires to class="updater" because that's the name of the JS class
    Updater.autowire();


    class TrashBin extends Autowire {
        put(trash){
            this.innerHTML += trash+'<br><hr><br>';
        }
    }
    TrashBin.autowire(".TrashBucket");

</script>

<div class="result">
    <h1>Disappearing html</h1>
    <p>I should be moved immediately to the trash bucket.</p>
</div>
<br><br>
<button class="Updater">Click me to update the content</button>

<br>
<br>
<div class="TrashBucket">
    <h1>Trash Bucket</h1>
    <hr>
</div>