原文連結：https://www.alanhou.org/odoo-14-owl-todolist/

1、元件樹

Root

const { Component, useState } = owl;
const { xml } = owl.tags;

class Counter extends Component {
  static template = xml`
    <button t-on-click="state.value++">
      Click Me! [<t t-esc="state.value"/>]
    </button>`;

  state = useState({ value: 0 });
 

}

class App extends Component {
  static template = xml`
    <div>
      <span>Hello Owl</span>
      <Counter />
    </div>`;

  static components = { Counter };
}

const app = new App();
app.mount(document.body);

owl_todoapp

(function () {
    const {Component, Store} 
 
= owl;  //
    const {xml} = owl.tags;          //用來插入xml程式碼片段的
    const {whenReady} = owl.utils;    //工具類
    const {useRef, useDispatch, useState, useStore} = owl.hooks; //鉤子

    // -------------------------------------------------------------------------
    // Store
    // -------------------------------------------------------------------------
 

    const actions = {
        addTask({state}, title) {
            title = title.trim();
            if (title) {
                const task = {
                    id: state.nextId++,
                    title: title,
                    isCompleted: false,
                };
                state.tasks.push(task);
            }
        },
        toggleTask({state}, id) {
            const task = state.tasks.find((t) => t.id === id);
            task.isCompleted = !task.isCompleted;
        },
        deleteTask({state}, id) {
            const index = state.tasks.findIndex((t) => t.id === id);
            state.tasks.splice(index, 1);
        },
    };

    const initialState = {
        nextId: 1,
        tasks: [],
    };

    // -------------------------------------------------------------------------
    // Task Component  可點選任務標題來切換複選框狀態：

    // -------------------------------------------------------------------------
    const TASK_TEMPLATE = xml/* xml */`
    <div class="task" t-att-class="props.task.isCompleted ? 'done' : ''">
        <input type="checkbox" t-att-checked="props.task.isCompleted"
            t-att-id="props.task.id"
            t-on-click="dispatch('toggleTask', props.task.id)"/>
        <label t-att-for="props.task.id"><t t-esc="props.task.title"/></label>
        <span class="delete" t-on-click="dispatch('deleteTask', props.task.id)">