dom - Google Dart：IListElementのイベントを変更します

Question

UListElementの要素が変更された（つまり、LIElement追加または削除された）ときにリッスンできるかどうか疑問に思っていますか？

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?

私はelements.add()ActionScriptのバックグラウンドから来ているので、非同期であると想定しています。これは有効な仮定ですか？

Answer 1

高レベルのフレームワークはこのためのイベントを提供しますが、HTML5 APIレベルでは、MutationObserverを使用する必要があります。

これは、任意のDOMElementオブジェクトにミューテーションオブザーバーを設定できる例です。その後、ハンドラーは必要に応じてミューテーションイベントを処理できます。

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
    });
  }
}

Answer 2

MDVでの私たちの仕事にも興味があるかもしれません：

• http://blog.sethladd.com/2012/11/your-first-input-field-binding-with-web.html
• http://blog.sethladd.com/2012/11/your-first-model-driven-view-with-dart.html

Answer 3

element.elements.add(otherElement)同期でありelement.appendChild(otherElement)、Javascriptと同等です（つまり、DOMレベル2コア：appendChild）。