GwtQuery Observe Plugin Demo

Usage

Open your javascript Console and either:

• modify the div element contents.
• or modify objects in js:

   e.setAttribute('hello','world');
   o.foo = 'bar';
   a.push('yep');
  

Example Code

  final GQuery g =  $("div");
  final Properties o = $$();
  final JsArrayString a = JsArray.createArray().cast();

  public void onModuleLoad() {
    $(window).prop("e", g.get(0)).prop("o", o).prop("a", a);

    g.as(Observe.Observe).mutation(
             Observe.createMutationInit()
                    .attributes(true)
                    .characterData(true)
                    .childList(true)
                    .subtree(true),
             new MutationListener() {
      public void onMutation(List<MutationRecord> mutations) {
        for (MutationRecord r: mutations) {
          console.log("M - > ", r.getDataImpl());
        }
      }
    });

    Observe.observe(o, new ObserveListener() {
      public void onChange(List<ChangeRecord> changes) {
        for(ChangeRecord r : changes) {
          console.log("O -> ", r.getDataImpl());
        }
      }
    });

    Observe.observe(a, new ObserveListener() {
      public void onChange(List<ChangeRecord> changes) {
        for(ChangeRecord r : changes) {
          console.log("A -> ", r.getDataImpl());
        }
      }
    });
  }