Dart Core Pages Selector Detection

Question

I'm attempting to accomplish page change detection through core-pages in a Polymer element http://www.polymer-project.org/docs/elements/core-elements.html#core-pages , so I can load appropriate methods for each. Right now, the Dart snippet is initialized within the init method (the first one that launches when the application starts). I'm not sure how to keep track of when the pages change and also a decent way to detect updates (so I can at least see the different LOG updates in the snippet below). The code heavily relates to this question: Google Dart Pages within Tabs . Please let me know if you need more information.

HTML:

 <paper-tabs id="Tabs" selected="{{page}}" style='width:800px; height:50px; color:#333333;'>
      <paper-tab>Display 1</paper-tab>
      <paper-tab>Display 2</paper-tab>
    </paper-tabs>

    <core-pages selected="{{page}}">
   </core-pages>

Dart:

@observable int page = 0;

var pages = shroot.querySelector("core-pages");
     pages.onChange.listen((e) {
            //keep for debugging
                 if (pages == 0) {
                   _LOG.info("properties 1 selected");
                   display();
                 } else if (pages == 1) {
                   _LOG.info("properties 2 selected");
                   display();
                 }
          });

Answer 1

I can't find any change event in core-pages or its super classes.

I think this is the simplest way doing it:

  @observable int page = 0;

  void pageChanged(oldValue, newValue) {
  //keep for debugging
    if (page == 0) {
      _LOG.info("properties 1 selected");
      display();
    } else if (page == 1) {
      _LOG.info("properties 2 selected");
      display();
    }
  }

If you prefer listening to events, core-pages extends core-selector which has
- core-select - sent twice for deselect (old) and select (new). You need access to the event details to know which one it is and that is currently difficult because you need dart-js-interop
- core-activate - fired when an item element is tapped. Not sure if it fires when the selection changes by binding and you also need access to the event.details to get which page is actually selected.

Answer 2

This is what I use to get the selection change event on core-pages:

<core-pages on-core-select='{{pageChange}}' id='pager' selected="{{page}}">
  <!-- content page widgets -->
</core-pages>

then in Dart

void pageChange(Event e, d, _){
  e.stopPropagation();
  e.preventDefault();
  if(d['item'] is! ContentPage) return;

  if (d['isSelected']){
    d['item'].loaded();
  }else{
    d['item'].unloaded();
  }
}

All of my content pages implement a mixin ContentPage that has .loaded() & .unloaded() methods, so that's how I alert each content page that it is now selected or unselected. I did this because core-pages loads all the content into the DOM at runtime.