Connection Destroy page

Delete todos in the page (can-connect use)

The problem

When a todo’s destroy button is clicked, we need to delete the todo on the server and remove the todo’s element from the page. While the todo is being destroyed, add destroying to the todo’s <li>’s class attribute.

Things to know

The solution

Click to see the solution

Update index.stache to the following:

<!-- index.stache -->
<section id="todoapp">
    <header id="header">
        <h1>{{ this.appName }}</h1>
        <input id="new-todo" placeholder="What needs to be done?">
    </header>
    <section id="main" class="">
        <input id="toggle-all" type="checkbox">
        <label for="toggle-all">Mark all as complete</label>
        <ul id="todo-list">
            {{# for(todo of this.todosList) }}
                <li class="todo {{# if(todo.complete) }}completed{{/ if }}
                    {{# if(todo.isDestroying()) }}destroying{{/ if }}">
                    <div class="view">
                        <input class="toggle" type="checkbox"
                            checked:bind="todo.complete"
                            on:change="todo.save()"
                            disabled:from="todo.isSaving()" />
                        <label>{{ name }}</label>
                        <button class="destroy" on:click="todo.destroy()"></button>
                    </div>
                    <input class="edit" type="text" value="{{ todo.name }}" />
                </li>
            {{/ for }}
        </ul>
    </section>
    <footer id="footer" class="">
        <span id="todo-count">
            <strong>{{ this.todosList.active.length }}</strong> items left
        </span>
        <ul id="filters">
            <li>
                <a class="selected" href="#!">All</a>
            </li>
            <li>
                <a href="#!active">Active</a>
            </li>
            <li>
                <a href="#!completed">Completed</a>
            </li>
        </ul>
        <button id="clear-completed">
            Clear completed ({{ this.todosList.complete.length }})
        </button>
    </footer>
</section>