onlyurei/todomvc-knockout-spa

<section class="todoapp">
    <header class="header">
        <h1>todos</h1>
        <input data-bind="event: { keydown: createItem }, value: newItemTitle, valueUpdate: 'input'"
               class="new-todo" placeholder="What needs to be done?" autofocus>
    </header>
    <section data-bind="visible: models.length" id="main" class="main">
        <!-- ko if: models.length -->
        <input data-bind="click: toggleAllItems, checked: allCompleted" class="toggle-all" type="checkbox">
        <!-- /ko -->
        <label for="toggle-all">Mark all as complete</label>
        <ul data-bind="foreach: models" class="todo-list">
            <li data-bind="css: { completed: completed, editing: editing }">
                <todo-item params="model: $data, todoList: $parent"></todo-item>
            </li>
        </ul>
    </section>
    <footer data-bind="visible: models.length" id="footer" class="footer">
        <span class="todo-count">
            <strong data-bind="text: activeItemsCount"></strong> item<span
                data-bind="text: (activeItemsCount === 1) ? '' : 's'"></span> left
        </span>
        <ul class="filters">
            <li>
                <a data-bind="css: { selected: filter() === '' }" href="/">All</a>
            </li>
            <li>
                <a data-bind="css: { selected: filter() === 'active' }" href="/active">Active</a>
            </li>
            <li>
                <a data-bind="css: { selected: filter() === 'completed' }" href="/completed">Completed</a>
            </li>
        </ul>
        <!-- ko if: activeItemsCount < models.length -->
        <button data-bind="click: destroyCompletedItems" class="clear-completed">Clear completed</button>
        <!-- /ko -->
    </footer>
</section>