Hi,
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?
delete-todo.call="deleteTodo($index)"
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 todo-item
and for todo-component.js it says.
Line 24: 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.