In my project using Angular 1, I have developed a todo list application which consists of two components. The first is a smart (container) component responsible for server-side interactions, while the second is a dumb/pure/stateless presentation component that displays the list of todos and a field to add new ones. This presentation component includes an event binding called onCreate, allowing the parent component to post a Todo to the server upon creation.
<todo-container>
<todo-list todos="vm.todos" on-create="vm.postTodoToServer($event)"> </todo-list>
</todo-container>
For proper functionality, each Todo in the <todo-list> should have an ID assigned for PUT/PATCH/DELETE operations which will be implemented with future onUpdate and onDelete bindings. However, since the ID of newly added Todo items is only known after they are posted to the server, the challenge lies in passing this information from <todo-container> to <todo-list>.
How can I manage this scenario effectively without tightly coupling the two components? It's important to design a solution that allows flexibility in case I want to reuse <todo-list> in other parts of the application where server-side interaction may not be required.