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

0
votes

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?

2
dartpolymerdart-polymer

2 Answers

1
votes

  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.

1
votes

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 }