How to create a custom ul element with polymer dart which fires on-added and on-remove event when children are added?

Question

I have been making a simple todo list as a way to learn polymer dart. Here is my todo example. I have limited experience in web-programming in general. My idea is to create a simple app with

• One text input
• 2 Custom ul elements (New task ul and Done task ul)
• Entering a string in text input and pressing enter creates a li item which is added to New task.
• Deleting an element from New task results in addition of element to Done task.
• Now I know creating a separate model and tracking the changes in an observable list seperate from html might be better approach. But as a learning exercise I would like to create a custom ul which fires a on-added and on-removed event when li item are added and removed from it respectively.

Now I have a couple of questions.

1. Why is there no on-added or on-remove event in ul (html)? I would like to understand what is the rational behind it.

2. How would one go about creating a custom UListElement which fires on-added and on-removed event when li items are added or removed from it respectively?

Answer 1

1. Because normally you won't need it. As you wrote you change the model and let Polymer update the view.

2. You can easily implement it yourself by overriding the attached/detached methods and fire an event. See https://stackoverflow.com/a/22424213/217408 for how to fire custom events in Polymer.dart.

Answer 2

Gunter is right. You're thinking is a little old school, so I'm surprised to hear that you're new to web dev. With Polymer, you need to embrace the data-driven view model. You want to be watching the backing model properties that are driving your view, not the DOM. Something like this:

@observable List<Task> tasks;

void tasksChanged(oldValue) { // react to changes }