`, add the following code:
`todo-view.ts`
```typescript
return html`
${this.todos.map((todo) => /* <1> */html`
*/}
@checked-changed=${(e: CustomEvent) => // (3)
this.updateTodoState(todo, e.detail.value)}
>
${todo.task}
`
)}
`;
```
1. The existing `todo` items are shown by mapping the `todos` array to Lit templates. The template for a single `Todo` contains a checkbox and the task text.
2. Bind the `checked` boolean attribute to the `done` property on the `todo`.
3. Call the `updateTodoState()` method, with the `todo` and the new value, whenever the checked value changes.
###
Update View State and Call Backend
Below the `render()` method in the `TodoView` class, add a `connectedCallback()` lifecycle callback to initialize the view when it’s attached to the DOM.
`todo-view.ts`
```typescript
async connectedCallback() { // (1)
super.connectedCallback(); // (2)
this.todos = await TodoEndpoint.findAll(); // (3)
}
```
1. Use an [async function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) to make it easier to handle asynchronous code.
2. Remember to call the superclass method.
3. The `getTodos()` method is automatically generated by Hilla based on the method in `TodosEndpoint.java`. The method was imported in the head of the file. The `await` keyword waits for the server response without blocking the UI.
Below the `connectedCallback()`, add another method to handle the creation of a new `Todo`.
`todo-view.ts`
```typescript
async createTodo() {
const createdTodo = await this.binder.submitTo(TodoEndpoint.save); // (1)
if (createdTodo) {
this.todos = [...this.todos, createdTodo]; // (2)
this.binder.clear(); // (3)
}
}
```
1. Use `binder` to submit the form to `TodoEndpoint`. The `Binder` validates the input before posting it, and the server revalidates it.
2. Update the state with a new array that includes the saved `Todo`. This re-renders the view.
3. Clear the form input.
Finally, add a method for updating the `todo` state right below `createTodo()`:
`todo-view.ts`
```typescript
updateTodoState(todo: Todo, done: boolean) {
todo.done = done;
const updatedTodo = { ...todo }; // (1)
this.todos = this.todos.map((t) => (t.id === todo.id ? updatedTodo : t)); // (2)
TodoEndpoint.save(updatedTodo); // (3)
}
```
1. Create a new `Todo` with the updated `done` state.
2. Update the local `todos` array with the new state. The `map` operator creates a new array where the changed `todo` is swapped out. This re-renders the view.
3. Save the updated `todo` to the server.
Get the complete view implementation
Open the `frontend/views/todo/todo-view.ts` file and replace its contents with the following:
`todo-view.ts`
```typescript
import { html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@vaadin/button';
import '@vaadin/checkbox';
import '@vaadin/text-field';
import { Binder, field } from '@vaadin/hilla-lit-form';
import Todo from 'Frontend/generated/com/example/application/Todo';
import TodoModel from 'Frontend/generated/com/example/application/TodoModel';
import { TodoEndpoint } from 'Frontend/generated/endpoints';
import { View } from '../view';
@customElement('todo-view')
export class TodoView extends View {
@state()
private todos: Todo[] = [];
private binder = new Binder(this, TodoModel);
render() {
return html`
Add
${this.todos.map(
(todo) => html`
this.updateTodoState(todo, e.detail.value)}>
${todo.task}
`)}
`;
}
async connectedCallback() {
super.connectedCallback();
this.todos = await TodoEndpoint.findAll();
}
async createTodo() {
const createdTodo = await this.binder.submitTo(TodoEndpoint.save);
if (createdTodo) {
this.todos = [...this.todos, createdTodo];
this.binder.clear();
}
}
updateTodoState(todo: Todo, done: boolean) {
todo.done = done;
const updatedTodo = { ...todo };
this.todos = this.todos.map((t) => (t.id === todo.id ? updatedTodo : t));
TodoEndpoint.save(updatedTodo);
}
}
```
##
6. Run the Application
Run the project from the command line with the following command:
terminal
**Windows**
```bash
mvnw
```
terminal
**macOS / Linux**
```bash
./mvnw
```
The first time you run the application, it may take up to a few minutes, as Hilla downloads all the dependencies and builds a frontend bundle. Subsequent builds don’t download dependencies, so that they are much faster.
When the build has finished, you should see the application running on
.
You should now have a fully functional to-do application. Notice that when you refresh the browser, it keeps the same `todo` items, as they are persisted in the database.
[Image: The to-do application running in a web browser]