owl/examples/todoapp/templates.xml

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

    <section t-name="todoapp" class="todoapp">
        <!-- header -->
        <header class="header">
            <h1>todos</h1>
            <input class="new-todo" autofocus="true" autocomplete="off" placeholder="What needs to be done?" t-on-keyup="addTodo"/>
        </header>
        <!-- main section -->
        <section class="main" t-if="props.todos.length">
            <input class="toggle-all" id="toggle-all" type="checkbox" t-att-checked="allChecked" t-on-click="toggleAll"/>
            <label for="toggle-all"></label>
            <ul class="todo-list">
                <t t-foreach="visibleTodos" t-as="todo">
                    <t t-widget="TodoItem" t-key="todo.id" t-props="todo"/>
                </t>
            </ul>
        </section>
        <!-- footer -->
        <footer class="footer" t-if="props.todos.length">
            <span class="todo-count">
                <strong>
                    <t t-esc="remaining"/>
                </strong>
                <t t-esc="remainingText"/>
            </span>
            <ul class="filters">
                <li>
                    <a href="#/all" t-on-click="setFilter('all')" t-att-class="{selected: state.filter === 'all'}">All</a>
                </li>
                <li>
                    <a href="#/active" t-on-click="setFilter('active')" t-att-class="{selected: state.filter === 'active'}">Active</a>
                </li>
                <li>
                    <a href="#/completed" t-on-click="setFilter('completed')" t-att-class="{selected: state.filter === 'completed'}">Completed</a>
                </li>
            </ul>
            <button class="clear-completed" t-if="props.todos.length gt remaining" t-on-click="clearCompleted">
        Clear completed
            </button>
        </footer>
    </section>

    <li t-name="todoitem" class="todo" t-att-class="{completed: props.completed, editing: state.isEditing}">
        <div class="view">
            <input class="toggle" type="checkbox" t-on-change="toggleTodo" t-att-checked="props.completed"/>
            <label t-on-dblclick="editTodo">
                <t t-esc="props.title"/>
            </label>
            <button class="destroy" t-on-click="removeTodo"></button>
        </div>
        <input class="edit" t-ref="'input'" t-if="state.isEditing" t-att-value="props.title" t-on-keyup="handleKeyup" t-on-blur="handleBlur"/>
    </li>

</templates>