Polymer Dart Core Ajax and Core List

main_app.html
===================
<polymer-element name="main-app" >
  <template id="app">
      <core-ajax-dart auto id="_ajax"
               url="https://polymer-contacts.firebaseio.com/{{category}}.json"
               response="{{contacts}}" handleAs="json"></core-ajax-dart>
      <core-animated-pages id="pages" transitions="cross-fade fade-slide-up fade-scale" fit>

          <section layout vertical>
              <contacts-page class="page" id="contacts" contacts="{{contacts}}"
                             heading="{{heading}}"
                             flex>
              </contacts-page>
          </section>
      </core-animated-pages>
  </template>
  <script type="application/dart" src="main_app.dart"></script>
</polymer-element>

main_app.dart
======================
import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:core_elements/core_ajax_dart.dart';
import 'elements/contacts_page/contacts_page.dart';
/// A Polymer `<main-app>` element.
@CustomTag('main-app')
class MainApp extends PolymerElement {
  @observable String category;
  String heading;
  List contacts;

  MainApp.created() : super.created(){
    var DEFAULT_ROUTE = '/contacts/all';
    category = 'all';
  }

  ready() {
    super.ready();
    ContactsPage cp = $['contacts'] as ContactsPage;
    cp.heading = "All Contacts";
    var ajax = $['_ajax'] as CoreAjax;
    ajax.on["core-response"].listen((event) {
      var detail = event.detail;
      var response = detail['response'];
      window.console.info("Data load event called");
      cp.contacts = response;
    });
  }
}

contacts_page.html
====================
<polymer-element name="contacts-page" extends="base-page" attributes="contacts heading">
    <template>
            <!-- Main -->
            <div main layout vertical>
                <core-header-panel id="headerPanel" mode="seamed" flex>
                    <div class="content">
                        <core-list-dart id="list" data="{{contacts}}"
                                   scrollTarget="{{$['headerPanel.scroller']}}"
                                   runwayFactor="5">
                            <template>
                                <a _href="{{index | getUrl}}" on-click="{{navigate}}">
                                    <div class="row" layout horizontal center>
                                        <core-image src="{{model.avatar}}" preload sizing="cover">
                                        </core-image>
                                        <div flex>{{model.name}}</div>
                                    </div>
                                </a>
                            </template>
                        </core-list-dart>
                    </div>
                </core-header-panel>
            </div>
        </core-drawer-panel>
    </template>
    <script type="application/dart" src="contacts_page.dart"></script>
</polymer-element>

contacts_page.dart
=====================
import 'package:polymer/polymer.dart';
import 'package:core_elements/core_drawer_panel.dart';
import 'package:core_elements/core_list_dart.dart';
import 'dart:html';

@CustomTag('contacts-page')
class ContactsPage extends PolymerElement{
  @published String heading;
  @published List contacts;
  ContactsPage.created() : super.created();
}