Aprende OWL en Odoo 20

curso_owl_ejemplos/
├── __init__.py
├── __manifest__.py
├── views/ejemplos_menu.xml
└── static/src/
    ├── hola/hola.js, hola.xml
    ├── contador/contador.js, contador.xml
    └── ...

{
    'name': 'Curso OWL: ejemplos',
    'version': '1.0',
    'category': 'Tutorials',
    'summary': 'Ejemplos cortos de OWL 3 en Odoo 20',
    'author': 'Curso OWL',
    'license': 'LGPL-3',
    'depends': ['web'],
    'data': [
        'views/ejemplos_menu.xml',
    ],
    'assets': {
        'web.assets_backend': [
            'curso_owl_ejemplos/static/src/**/*',
        ],
    },
    'application': True,
    'installable': True,
}

id,name,model_id,group_id/id,operation,domain
access_curso_todo_user,curso.todo.user,curso.todo,base.group_user,crud,

import { Component } from "@odoo/owl";
import { registry } from "@web/core/registry";

export class Hola extends Component {
    static template = "curso_owl_ejemplos.Hola";

    nombre = "Odoo 20";
}

registry.category("actions").add("curso_owl_ejemplos.hola", Hola);

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="curso_owl_ejemplos.Hola">
        <div class="p-3">Hola, <t t-out="this.nombre"/></div>
    </t>

</templates>

<record id="action_hola" model="ir.actions.client">
    <field name="name">Hola</field>
    <field name="tag">curso_owl_ejemplos.hola</field>
</record>
<menuitem id="menu_hola" name="Hola" action="action_hola" parent="menu_ejemplos_root"/>

import { Component, computed, proxy, signal } from "@odoo/owl";
import { registry } from "@web/core/registry";

export class Contador extends Component {
    static template = "curso_owl_ejemplos.Contador";

    // signal: se lee llamándola y se escribe con .set()
    cuenta = signal(0);
    // computed: valor derivado, se recalcula solo cuando cambia lo que lee
    doble = computed(() => this.cuenta() * 2);
    // proxy: objeto reactivo profundo, se usa como un objeto normal
    estado = proxy({ historial: [] });

    incrementar() {
        this.cuenta.set(this.cuenta() + 1);
        this.estado.historial.push(this.cuenta());
    }
}

registry.category("actions").add("curso_owl_ejemplos.contador", Contador);

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="curso_owl_ejemplos.Contador">
        <div class="p-3">
            <button class="btn btn-primary" t-on-click="this.incrementar">
                Cuenta: <t t-out="this.cuenta()"/>
            </button>
            <p>Doble: <t t-out="this.doble()"/></p>
            <p>Historial: <t t-out="this.estado.historial.join(', ')"/></p>
        </div>
    </t>

</templates>

import { Component, t, useProps } from "@odoo/owl";
import { registry } from "@web/core/registry";

export class Saludo extends Component {
    static template = "curso_owl_ejemplos.Saludo";
    props = useProps({
        nombre: t.string(),
        veces: t.number().optional(1),
        etiquetas: t.array(t.string()).optional(() => []),
    });
}

export class PropsDemo extends Component {
    static template = "curso_owl_ejemplos.PropsDemo";
    static components = { Saludo };
}

registry.category("actions").add("curso_owl_ejemplos.props", PropsDemo);

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="curso_owl_ejemplos.Saludo">
        <p>
            <t t-out="this.props.nombre"/> (x<t t-out="this.props.veces"/>)
            <span t-if="this.props.etiquetas.length" t-out="this.props.etiquetas.join(', ')"/>
        </p>
    </t>

    <t t-name="curso_owl_ejemplos.PropsDemo">
        <div class="p-3">
            <Saludo nombre="'Ana'"/>
            <Saludo nombre="'Luis'" veces="3" etiquetas="['nuevo']"/>
            <Saludo nombre.translate="Equipo"/>
        </div>
    </t>

</templates>

import { Component, signal, useListener } from "@odoo/owl";
import { registry } from "@web/core/registry";

export class Eventos extends Component {
    static template = "curso_owl_ejemplos.Eventos";

    mensaje = signal("Sin eventos");
    tecla = signal("");

    setup() {
        // Para objetivos globales se usa useListener: se retira al destruir el componente.
        useListener(window, "keydown", (ev) => this.tecla.set(ev.key));
    }

    alPulsar(ev) {
        this.mensaje.set(`Clic en ${ev.target.tagName}`);
    }

    saludar(nombre) {
        this.mensaje.set(`Hola, ${nombre}`);
    }
}

registry.category("actions").add("curso_owl_ejemplos.eventos", Eventos);

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="curso_owl_ejemplos.Eventos">
        <div class="p-3">
            <button class="btn btn-primary" t-on-click="this.alPulsar">Método</button>
            <button class="btn btn-secondary" t-on-click="() => this.saludar('Ana')">Con argumento</button>
            <a href="#" t-on-click.prevent.stop="() => this.saludar('enlace')">Con modificadores</a>
            <p t-out="this.mensaje()"/>
            <p>Última tecla: <t t-out="this.tecla()"/></p>
        </div>
    </t>

</templates>

import {
    Component,
    onError,
    onMounted,
    onPatched,
    onWillDestroy,
    onWillPatch,
    onWillStart,
    onWillUnmount,
    signal,
} from "@odoo/owl";
import { registry } from "@web/core/registry";

export class CicloVida extends Component {
    static template = "curso_owl_ejemplos.CicloVida";

    clics = signal(0);
    raiz = signal.ref();

    setup() {
        onWillStart(async () => {
            // Se espera antes del primer render: aquí se cargan los datos.
            this.dato = await Promise.resolve("cargado");
        });
        onMounted(() => console.log("onMounted", this.raiz()));
        onWillPatch(() => console.log("onWillPatch"));
        onPatched(() => console.log("onPatched", this.clics()));
        onWillUnmount(() => console.log("onWillUnmount"));
        onWillDestroy(() => console.log("onWillDestroy"));
        onError((error) => console.error("onError", error));
    }
}

registry.category("actions").add("curso_owl_ejemplos.ciclo_vida", CicloVida);

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="curso_owl_ejemplos.CicloVida">
        <div class="p-3" t-ref="this.raiz">
            <p t-out="this.dato"/>
            <button class="btn btn-primary" t-on-click="() => this.clics.set(this.clics() + 1)">
                Clics: <t t-out="this.clics()"/>
            </button>
        </div>
    </t>

</templates>

import { Component, signal, t, useProps } from "@odoo/owl";
import { registry } from "@web/core/registry";

export class Caja extends Component {
    static template = "curso_owl_ejemplos.Caja";
    props = useProps({ titulo: t.string() });
}

export class Directivas extends Component {
    static template = "curso_owl_ejemplos.Directivas";
    static components = { Caja };

    colores = signal([
        { id: 1, nombre: "rojo" },
        { id: 2, nombre: "verde" },
        { id: 3, nombre: "azul" },
    ]);
    texto = signal("");
    activo = signal(false);
    color = signal("rojo");
    entrada = signal.ref();

    enfocar() {
        this.entrada()?.focus();
    }
}

registry.category("actions").add("curso_owl_ejemplos.directivas", Directivas);

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="curso_owl_ejemplos.Caja">
        <section class="card p-2 mb-2">
            <h3 t-out="this.props.titulo"/>
            <t t-call-slot="default">Sin contenido</t>
            <footer class="text-muted"><t t-call-slot="pie"/></footer>
        </section>
    </t>

    <t t-name="curso_owl_ejemplos.Directivas">
        <div class="p-3">
            <!-- t-foreach: t-key es obligatorio; item_index e item_first los crea OWL -->
            <ul>
                <t t-foreach="this.colores()" t-as="item" t-key="item.id">
                    <li t-att-class="{ 'fw-bold': item_first }">
                        <t t-out="item_index + 1"/>. <t t-out="item.nombre"/>
                    </li>
                </t>
            </ul>

            <!-- t-if, t-elif, t-else -->
            <p t-if="this.texto().length gt 10">Texto largo</p>
            <p t-elif="this.texto()">Texto corto</p>
            <p t-else="">Sin texto</p>

            <!-- t-att, t-att-*, t-attf-* -->
            <button class="btn" t-attf-class="btn-{{ this.activo() ? 'success' : 'secondary' }}"
                t-att-disabled="!this.activo()" t-att="{ 'data-demo': 'si' }">
                Botón
            </button>

            <!-- t-model con signal, t-ref con signal.ref() -->
            <input class="o_input" t-model="this.texto" t-ref="this.entrada"/>
            <label><input type="checkbox" t-model="this.activo"/> Activo</label>
            <select class="o_input" t-model="this.color">
                <t t-foreach="this.colores()" t-as="item" t-key="item.id">
                    <option t-att-value="item.nombre" t-out="item.nombre"/>
                </t>
            </select>

            <!-- t-on -->
            <button class="btn btn-link" t-on-click="this.enfocar">Enfocar</button>

            <!-- t-call-slot en Caja, t-set-slot aquí -->
            <Caja titulo="'Con slots'">
                Contenido por defecto
                <t t-set-slot="pie">Color elegido: <t t-out="this.color()"/></t>
            </Caja>
        </div>
    </t>

</templates>

<input t-model="this.texto"/>             <!-- signal -->
<input t-model.proxy="this.state.texto"/>  <!-- proxy -->

import { Component, signal, t, useProps } from "@odoo/owl";
import { registry } from "@web/core/registry";

export class Hijo extends Component {
    static template = "curso_owl_ejemplos.Hijo";
    props = useProps({
        valor: t.number(),
        onSumar: t.function(),
        // Una signal como prop: el hijo la lee sin que el padre se vuelva a renderizar.
        total: t.signal(t.number()),
    });
}

export class Comunicacion extends Component {
    static template = "curso_owl_ejemplos.Comunicacion";
    static components = { Hijo };

    a = signal(1);
    total = signal(1);

    sumar(cantidad) {
        this.a.set(this.a() + cantidad);
        this.total.set(this.total() + cantidad);
    }
}

registry.category("actions").add("curso_owl_ejemplos.comunicacion", Comunicacion);

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="curso_owl_ejemplos.Hijo">
        <div>
            <p>Valor recibido: <t t-out="this.props.valor"/></p>
            <p>Total (signal): <t t-out="this.props.total()"/></p>
            <button class="btn btn-primary" t-on-click="() => this.props.onSumar(1)">Sumar 1</button>
        </div>
    </t>

    <t t-name="curso_owl_ejemplos.Comunicacion">
        <div class="p-3">
            <Hijo valor="this.a()" total="this.total" onSumar.bind="this.sumar"/>
        </div>
    </t>

</templates>

import { Component, signal, usePlugin } from "@odoo/owl";
import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
import { _t } from "@web/core/l10n/translation";
import { rpc } from "@web/core/network/rpc";
import { ORM } from "@web/core/orm_plugin";
import { registry } from "@web/core/registry";
import { user } from "@web/core/user";
import { useService } from "@web/core/utils/hooks";

export class Servicios extends Component {
    static template = "curso_owl_ejemplos.Servicios";

    // Forma nueva: importar la clase del plugin.
    orm = usePlugin(ORM);
    version = signal("");

    setup() {
        // Forma puente: useService sigue funcionando con estos nombres.
        this.action = useService("action");
        this.dialog = useService("dialog");
        this.notification = useService("notification");
        this.nombreUsuario = user.name;
    }

    async contarUsuarios() {
        const total = await this.orm.searchCount("res.users", []);
        this.notification.add(_t("Usuarios: %(total)s", { total }), { type: "info" });
    }

    async cargarVersion() {
        const info = await rpc("/web/webclient/version_info");
        this.version.set(info.server_version);
    }

    abrirUsuarios() {
        return this.action.doAction({
            type: "ir.actions.act_window",
            res_model: "res.users",
            views: [[false, "list"]],
        });
    }

    confirmar() {
        this.dialog.add(ConfirmationDialog, {
            title: _t("Confirmar"),
            body: _t("¿Mostrar una notificación?"),
            confirm: () => this.notification.add(_t("Confirmado"), { type: "success" }),
            cancel: () => {},
        });
    }
}

registry.category("actions").add("curso_owl_ejemplos.servicios", Servicios);

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="curso_owl_ejemplos.Servicios">
        <div class="p-3 d-flex flex-column gap-2 align-items-start">
            <p>Usuario: <t t-out="this.nombreUsuario"/></p>
            <button class="btn btn-primary" t-on-click="this.contarUsuarios">orm + notification</button>
            <button class="btn btn-primary" t-on-click="this.cargarVersion">rpc</button>
            <button class="btn btn-primary" t-on-click="this.abrirUsuarios">action</button>
            <button class="btn btn-primary" t-on-click="this.confirmar">dialog</button>
            <p t-if="this.version()">Versión: <t t-out="this.version()"/></p>
        </div>
    </t>

</templates>

import { computed, Plugin, signal, usePlugin } from "@odoo/owl";
import { ORM } from "@web/core/orm_plugin";
import { services } from "@web/core/services";

const MODEL = "curso.todo";
const FIELDS = ["name", "done", "priority"];

/**
 * Estado compartido entre la client action y el systray.
 * Cada escritura vuelve a leer del servidor: el servidor es la fuente de verdad.
 */
export class TodoPlugin extends Plugin {
    orm = usePlugin(ORM);

    todos = signal([]);
    pendingCount = computed(() => this.todos().filter((todo) => !todo.done).length);
    doneCount = computed(() => this.todos().length - this.pendingCount());

    async load() {
        this.todos.set(await this.orm.searchRead(MODEL, [], FIELDS));
    }

    async add(name) {
        await this.orm.create(MODEL, [{ name }]);
        await this.load();
    }

    async toggle(todo) {
        await this.orm.write(MODEL, [todo.id], { done: !todo.done });
        await this.load();
    }

    async remove(todo) {
        await this.orm.unlink(MODEL, [todo.id]);
        await this.load();
    }
}

services.add(TodoPlugin);

import { Component, useProps } from "@odoo/owl";
import { registry } from "@web/core/registry";
import { standardActionServiceProps } from "@web/webclient/actions/action_plugin";

export class MiAccion extends Component {
    static template = "mi_modulo.MiAccion";
    props = useProps(standardActionServiceProps);
}

registry.category("actions").add("mi_modulo.mi_accion", MiAccion);

import { _t } from "@web/core/l10n/translation";
import { useService } from "@web/core/utils/hooks";
import { patch } from "@web/core/utils/patch";
import { FormController } from "@web/views/form/form_controller";

patch(FormController.prototype, {
    setup() {
        super.setup(...arguments);
        // Nombre propio para no pisar atributos del componente original.
        this.cursoNotification = useService("notification");
    },

    async onRecordSaved(record, changes) {
        const result = await super.onRecordSaved(...arguments);
        if (record.resModel === "curso.todo") {
            this.cursoNotification.add(_t("Tarea guardada."), { type: "success" });
        }
        return result;
    },
});

import { Component, t, useProps } from "@odoo/owl";
import { _t } from "@web/core/l10n/translation";
import { registry } from "@web/core/registry";
import { standardFieldProps } from "@web/views/fields/standard_field_props";

export class TodoStarsField extends Component {
    static template = "curso_owl_todo.TodoStarsField";
    props = useProps({
        ...standardFieldProps,
        maxStars: t.number().optional(3),
    });

    get value() {
        return this.props.record.data[this.props.name] || 0;
    }

    get stars() {
        return Array.from({ length: this.props.maxStars }, (_, index) => index + 1);
    }

    onStarClick(star) {
        const value = star === this.value ? 0 : star;
        return this.props.record.update({ [this.props.name]: value });
    }
}

export const todoStarsField = {
    component: TodoStarsField,
    displayName: _t("Estrellas de tarea"),
    supportedTypes: ["integer"],
    supportedOptions: [
        {
            label: _t("Máximo de estrellas"),
            name: "max_stars",
            type: "number",
        },
    ],
    extractProps({ options }) {
        return { maxStars: options.max_stars };
    },
};

registry.category("fields").add("curso_stars", todoStarsField);

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="curso_owl_todo.TodoStarsField">
        <div class="o_curso_stars d-flex gap-1">
            <t t-foreach="this.stars" t-as="star" t-key="star">
                <span t-if="this.props.readonly"
                    class="oi"
                    data-icon="star"
                    t-att-class="{ 'oi-filled': star lte this.value }"/>
                <button t-else=""
                    type="button"
                    class="o_curso_star btn btn-link btn-link-inline p-0 oi"
                    data-icon="star"
                    t-att-class="{ 'oi-filled': star lte this.value }"
                    t-att-aria-label="star"
                    t-on-click.stop="() => this.onStarClick(star)"/>
            </t>
        </div>
    </t>

</templates>

<field name="priority" widget="curso_stars" options="{'max_stars': 5}"/>

import { Component, onMounted, usePlugin } from "@odoo/owl";
import { registry } from "@web/core/registry";
import { useService } from "@web/core/utils/hooks";
import { TodoPlugin } from "../todo_plugin";

export class TodoSystray extends Component {
    static template = "curso_owl_todo.TodoSystray";

    todoStore = usePlugin(TodoPlugin);

    setup() {
        this.action = useService("action");
        // onMounted y no onWillStart: no retrasamos el render de la barra superior.
        onMounted(() => this.todoStore.load());
    }

    openTodos() {
        return this.action.doAction("curso_owl_todo.todo_action");
    }
}

export const todoSystrayItem = {
    Component: TodoSystray,
};

registry.category("systray").add("curso_owl_todo.todo_systray", todoSystrayItem, { sequence: 50 });

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="curso_owl_todo.TodoSystray">
        <button class="o_curso_todo_systray o_nav_entry border-0"
            title="Tareas pendientes"
            aria-label="Tareas pendientes"
            t-on-click="this.openTodos">
            <i class="oi" data-icon="check" aria-hidden="true"/>
            <span t-if="this.todoStore.pendingCount()"
                class="badge rounded-pill ms-1"
                t-out="this.todoStore.pendingCount()"/>
        </button>
    </t>

</templates>

import { expect, test } from "@odoo/hoot";
import { waitFor } from "@odoo/hoot-dom";
import {
    contains,
    defineModels,
    fields,
    models,
    mountWithCleanup,
} from "@web/../tests/web_test_helpers";
import { TodoAction } from "@curso_owl_todo/todo_action/todo_action";

class CursoTodo extends models.Model {
    _name = "curso.todo";

    name = fields.Char();
    done = fields.Boolean({ default: false });
    priority = fields.Integer({ default: 0 });

    _records = [
        { id: 1, name: "Leer las notas", done: false, priority: 1 },
        { id: 2, name: "Hacer el ejercicio", done: true, priority: 0 },
    ];
}

defineModels([CursoTodo]);

test("muestra las tareas del servidor", async () => {
    await mountWithCleanup(TodoAction, { props: { action: {} } });

    expect(".o_curso_todo_item").toHaveCount(2);
});

test("filtra las tareas pendientes", async () => {
    await mountWithCleanup(TodoAction, { props: { action: {} } });

    await contains(".o_curso_todo_filter").select("pending");

    expect(".o_curso_todo_item").toHaveCount(1);
});

test("añade una tarea con el botón", async () => {
    await mountWithCleanup(TodoAction, { props: { action: {} } });

    // confirm: false evita que edit() pulse Enter, que ya crearía la tarea.
    await contains(".o_curso_todo_input").edit("Nueva tarea", { confirm: false });
    await contains(".o_curso_todo_add").click();
    await waitFor(".o_curso_todo_item:contains(Nueva tarea)");

    expect(".o_curso_todo_item").toHaveCount(3);
});

test("añade una tarea con Enter", async () => {
    await mountWithCleanup(TodoAction, { props: { action: {} } });

    await contains(".o_curso_todo_input").edit("Con Enter");
    await waitFor(".o_curso_todo_item:contains(Con Enter)");

    expect(".o_curso_todo_item").toHaveCount(3);
});

import { Component, computed, onWillStart, signal, usePlugin, useProps } from "@odoo/owl";
import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
import { _t } from "@web/core/l10n/translation";
import { registry } from "@web/core/registry";
import { useAutofocus, useService } from "@web/core/utils/hooks";
import { standardActionServiceProps } from "@web/webclient/actions/action_plugin";
import { StatCard } from "../stat_card/stat_card";
import { TodoItem } from "../todo_item/todo_item";
import { TodoPlugin } from "../todo_plugin";

export class TodoAction extends Component {
    static template = "curso_owl_todo.TodoAction";
    static components = { StatCard, TodoItem };

    props = useProps(standardActionServiceProps);
    todoStore = usePlugin(TodoPlugin);

    newTodoName = signal("");
    filter = signal("all");
    inputRef = signal.ref();

    visibleTodos = computed(() => {
        const todos = this.todoStore.todos();
        switch (this.filter()) {
            case "pending":
                return todos.filter((todo) => !todo.done);
            case "done":
                return todos.filter((todo) => todo.done);
            default:
                return todos;
        }
    });

    setup() {
        this.action = useService("action");
        this.dialog = useService("dialog");
        this.notification = useService("notification");
        useAutofocus({ ref: this.inputRef });
        onWillStart(() => this.todoStore.load());
    }

    async addTodo() {
        const name = this.newTodoName().trim();
        if (!name) {
            this.notification.add(_t("Escribe un nombre para la tarea."), { type: "warning" });
            return;
        }
        await this.todoStore.add(name);
        this.newTodoName.set("");
        this.notification.add(_t("Tarea creada."), { type: "success" });
    }

    onInputKeydown(ev) {
        if (ev.key === "Enter") {
            this.addTodo();
        }
    }

    toggleTodo(todo) {
        return this.todoStore.toggle(todo);
    }

    openTodo(todo) {
        return this.action.doAction({
            type: "ir.actions.act_window",
            res_model: "curso.todo",
            res_id: todo.id,
            views: [[false, "form"]],
        });
    }

    deleteTodo(todo) {
        this.dialog.add(ConfirmationDialog, {
            title: _t("Eliminar tarea"),
            body: _t("Esta acción no se puede deshacer."),
            confirmLabel: _t("Eliminar"),
            confirm: () => this.todoStore.remove(todo),
            cancel: () => {},
        });
    }
}

registry.category("actions").add("curso_owl_todo.todo_action", TodoAction);

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="curso_owl_todo.TodoAction">
        <div class="o_curso_todo h-100 overflow-auto p-3" t-att-class="this.props.className">
            <h1>Mis tareas</h1>

            <div class="d-flex gap-2 mb-3">
                <StatCard title.translate="Pendientes">
                    <t t-out="this.todoStore.pendingCount()"/>
                </StatCard>
                <StatCard title.translate="Hechas">
                    <t t-out="this.todoStore.doneCount()"/>
                </StatCard>
            </div>

            <div class="d-flex gap-2 mb-3">
                <input class="o_curso_todo_input o_input"
                    placeholder="Nueva tarea"
                    t-ref="this.inputRef"
                    t-model="this.newTodoName"
                    t-on-keydown="this.onInputKeydown"/>
                <button class="o_curso_todo_add btn btn-primary" t-on-click="this.addTodo">
                    Añadir
                </button>
                <select class="o_curso_todo_filter o_input w-auto" t-model="this.filter">
                    <option value="all">Todas</option>
                    <option value="pending">Pendientes</option>
                    <option value="done">Hechas</option>
                </select>
            </div>

            <p t-if="!this.visibleTodos().length" class="o_curso_todo_empty text-muted">
                No hay tareas.
            </p>
            <ul t-else="" class="list-group">
                <t t-foreach="this.visibleTodos()" t-as="todo" t-key="todo.id">
                    <TodoItem
                        todo="todo"
                        onToggle.bind="this.toggleTodo"
                        onOpen.bind="this.openTodo"
                        onDelete.bind="this.deleteTodo"/>
                </t>
            </ul>
        </div>
    </t>

</templates>