For this example, we are going to use VS code for our basic Aurelia To do app. First, we will create the Todo class. Create a todo.js file and type:
This class is used to monitor Todo’s description text and whether it has been done or not.
Next let’s create an app.js class. This class will compile the list of todos in an array.
This will also have a header property containing the application name and a todo description property to monitor the description that the user wants to insert. The addTodo() and removeTodo() methods are also included to work with our Todo() class that was created earlier.
Now, we just need to tell Aurelia to render our heading. To do that, we have to create the view of the app. In an app.html file, type:
If you notice, every Aurelia view is wrapped with a <template> tag and you can use ES2015 string template syntax to render any property on a corresponding class in this view.
The <form> tag enables the user to input an additional item to the todo list. Notice that our <input> value is bound to our todoDescription property and our form is bound to a trigger event that calls the addTodo() method.
Next, let us render the list of our Todo app. Create an unordered list that use the repeat syntax that will generate the list of todos.
As you can see, the syntax also mirror the ES2015 for loop. As such, same techniques were used from the last example. The remove button is also added to call the removeTodo() method.
To finish it up, we will include a CSS binding that will make a strikethrough appear in the checked todos.
Your app can now be run. In a command line, type au run –watch. The watch attribute is included to make it automatically refresh every time we make changes in our app. In your browser, go to localhost:9000.
Amazingly, your app is now done. Aurelia enables this kind of simple and powerful development as your lines of code progresses. It helps you to get the job done and still stays out of your way while giving you top notch web performance.