user1838830
user1838830

Reputation: 131

Google Dart: change event for IListElement

I'm wondering if you can listen for when the elements of a UListElement has changed (i.e. LIElement added or removed)?

UListElement toDoList = query('#to-do-list');
LIElement newToDo = new LIElement();
newToDo.text = "New Task";
toDoList.elements.add(newToDo);
// how do I execute some code once the newToDo has been added to the toDoList?

I'm assuming elements.add() is asynchronous as I come from an ActionScript background. Is this a valid assumption?

Upvotes: 2

Views: 195

Answers (3)

John Evans
John Evans

Reputation: 7383

Higher level frameworks give you events for this, but at the HTML5 API level, you have to use a MutationObserver.

Here's an example where a mutation observer can be set on any DOM Element object. The handler can then process the mutation events as needed.

void setMutationObserver(Element element){
  new MutationObserver(mutationHandler)
    .observe(element, subtree: true, childList: true, attributes: false);
}

void mutationHandler(List<MutationRecord> mutations,
                    MutationObserver observer){
  for (final MutationRecord r in mutations){
    r.addedNodes.forEach((node){
      // do stuff here
    });

    r.removedNodes.forEach((node){
      // or here
    });
  }
}

Upvotes: 3

Alexandre Ardhuin
Alexandre Ardhuin

Reputation: 76193

element.elements.add(otherElement) is synchronous and is the equivalent of element.appendChild(otherElement) in Javascript (ie. DOM Level 2 Core : appendChild).

Upvotes: 0

Related Questions