I have been running through “Building a todo application”. I have built the application using the code provided, and when I run it, it just shows a white screen? After much playing with it, I have found the line that causes it, which is this in todo-component.html.
<todo-item repeat.for="todo of todos" todo.bind="todo" index.bind="$index" delete-todo.call="deleteTodo($index)"></todo-item>
I have found that if I remove this part from the todo-item element, it then appears to work?
Here is my example repository. You can see in todo-component.html I have commented out the troublesome line.
Many thanks for the help
That’s because the
delete-todo.call is an invalid attribute. You’ve already defined the
click.trigger action in your
todo-item component, so this is not necessary.
Hi, thanks for looking at the code.
I have just looked back at the “Building a todo application” documentation page and this was copied from the code on that page. Maybe things have changed since it was written?
It also explains why that code is there in todo-item.html.
delete-todo.call="deleteTodo($index)" this is a callback function that will call
deleteTodo when a todo is deleted from inside of the
and for todo-component.js it says.
deleteTodo will remove a todo from our
todos array and is passed an index
I think what it is trying to do is when the bindable property
deleteTodo on todo-item.html is called as a function, what it does is call the parent components
deleteTodo($index). This cause that method on the parent to be called with the index of the todo so it knows which index to remove from the array.