Taeluf.com

hello-aw.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>
<script type="text/javascript" src="../../../../code-ext/Bind.js"></script>


<h1>Boring</h1>
<div class="app">
    <span class="message"></span>
</div>


<script type="text/javascript">
    class App extends Autowire {
        _message(){ return 'message'; }
        onAttach(){
            this.node.innerHTML = "Hello Autowire";
        }
    };
    App.autowire();
</script>


<h2>Simple TODO List</h2>


<div class="TodoList">
    <ol>
        <!--
        Now we provide each todo-item with the todo object
        it's representing, so that its content can be dynamic.
        We also need to provide each component with a "key",
        which will be explained later.
        -->
        <li></li>
    </ol>
</div>

<script>

class TodoList extends Autowire {
    get liTemplate(){return this._liTemplate || (this._liTemplate = this.q('li'));}
    get ol(){ return this.q('ol'); }

    onAttach(groceryList) {
        this.liTemplate.parentNode.removeChild(this.liTemplate);
        //.style.display = none;
        for (let item of groceryList){
            this.add(item.text);
        }
    }

    add(text){
        const li = this.liTemplate.cloneNode(true);
        li.innerText = text
        this.ol.appendChild(li);
    }
}
TodoList.autowire(null, false,
        [
            { id: 0, text: 'Vegetables' },
            { id: 1, text: 'Plant based cheese' },
            { id: 2, text: 'Maybe fruit?' }
        ]
);
//app7.groceryList.push({id:4, text:"Some blah text"})
Autowire.getObjectsFromName('TodoList')[0].add('Hummus');
</script>


<hr><hr><hr>
<h1>Input Sync</h1>
<div class="InputSync">
    <p></p>
    <input>
</div>

<script>
class InputSync extends Autowire {
    get p(){ return this.q('p') }
    get input(){ return this.q('input') }

    onAttach(startingText = ''){
        this.input.value = startingText;
        this.update();
    }
    onkeyup(){
        this.update();
    }
    update(){
        this.p.innerText = this.input.value;
    }
}
InputSync.autowire(null,true,"Starts with this.");
</script>


<hr><hr><hr>


<!--
    This last example, Input Sync, will likely be forgotten and only updated at /test/integration/ext-Bind.html
-->
<h1>Input Sync</h1>
<div class="InputSyncBind">
    <p>Input: {{message}}</p>
    <input value="{{message}}">
</div>

<script>
class InputSyncBind extends Autowire {
    set message(msg){ this.fill('message', msg) }
    onAttach(message = ''){
        this.message = message;
    }

}
InputSyncBind.use('Autowire.Bind');
// InputSyncBind.autowire(null,true,"This should autobind to message in curly braces.");
InputSyncBind.aw("Great job!");
</script>