odoo owl playground

https://odoo.github.io/owl/playground/

 

/** @odoo-module **/

const { Component, useState, useRef, mount, props } = owl;

class Task extends Component {
    static template = "tasktemplate";
    static props = ["task", "toggleState"];
    
    toggleState(){
        console.log("child");
        this.props.toggleState(this.props.task);
    }
    testclick(){
        console.log("test click");
    }
    setup(){
        console.log("started");
    }
}

class Tasks extends Component {
    static template = "counter";
    static components = { Task };
    val = useState({val: 0});
    todo = useState([]);
    todoref = useRef("todoref");
    
    addtask(){
        this.val.val++;
        console.log(this.todoref.el.value);
        console.log(this.todo.length);
        this.todo.push({id:this.todo.length+1, description: this.todoref.el.value, done:false});
        this.todoref.el.focus();
    }
    
    toggleState(job){
        console.log("parent");
        console.log(job);
    }
    remove(job){
        console.log(job);
    }

    setup(){
        this.todo = [
            { id: 1, description: "buy milk", done: false },
            { id: 2, description: "buy cat", done: true },
            { id: 3, description: "buy book", done: false },
            ];
    }
}

mount(Tasks, document.body,  { templates: TEMPLATES, dev: true});

　　

 

<template>
  <div t-name="counter">
    <t t-esc="val.val"></t><br />
    <input t-name="todoinput" t-ref="todoref" />
    <button t-on-click="addtask">ClickMe</button>
    <div>
      <t t-foreach="todo" t-as="job" t-key="job.id">
        <div>
          <Task task="job" toggleState.bind="toggleState"  />
          <!--<input type="checkbox" t-att-checked="job.done" t-on-click="()=>toggleState(job)" />-->
          <!--<t t-esc="job.description"></t>-->
          <!--<span t-on-click="()=>remove(job)">=>X</span>-->
        </div>
      </t>
    </div>
  </div>
  
  <div t-name="tasktemplate">
    <input type="checkbox" t-att-checked="props.task.done" t-on-click="toggleState" />
    <t t-esc="props.task.description" />
    <span t-on-click="testclick">=>X</span>
  </div>
</template>