Polymer.Dart Event Listening

Question

I'm converting Sample Polymer Tutorial App to Dart.Polymer. The app tutorial is here [https://www.polymer-project.org/0.5/docs/start/tutorial/intro.html]

The problem I'm facing is with paper-tabs event listening. The js version of Polymer is:

  <core-header-panel>

    <core-toolbar>

      <paper-tabs id="tabs" selected="all" self-end>
        <paper-tab name="all">All</paper-tab>
        <paper-tab name="favorites">Favorites</paper-tab>
      </paper-tabs>

    </core-toolbar>

    <div class="container" layout vertical center>
      <post-list show="all"></post-list>
    </div>

  </core-header-panel>

  <script>
  var tabs = document.querySelector('paper-tabs');
  var list = document.querySelector('post-list');

  tabs.addEventListener('core-select', function() {
    list.show = tabs.selected;
  });
  </script>

This is index file. My Dart version looks something like this:

<core-header-panel>

    <core-toolbar>

      <paper-tabs id="tabs" selected="all" self-end>
        <paper-tab name="all">All</paper-tab>
        <paper-tab name="favorites">Favorites</paper-tab>
      </paper-tabs>

    </core-toolbar>

    <div class="container" layout vertical center>
      <post-list show="all"></post-list>
    </div>

  </core-header-panel>

<script type="application/dart">export 'package:polymer/init.dart';</script>

How do I listen to paper-tabs core-select event to update my tab content in Dart under script tag? I tried this but didn't work.

  var tabs = document.querySelector('paper-tabs');
  var list = document.querySelector('post-list');

  tabs.addEventListener('core-select', (e) {
    list.show = tabs.selected;
  });

You could try `tabs.on['core-select'].listen(...)` (see http://stackoverflow.com/questions/13897091) but I suspect you run into the same issue as mentioned here http://stackoverflow.com/questions/29629492. If you run your code querying Polymer elements from `main()` you need to ensure that Polymer is already properly initialized. — Günter Zöchbauer, Apr 17 '15 at 05:49
That's the problem actually. I'm not using main() so where do I write that script? — Jawaid, Apr 17 '15 at 07:06

score 1 · Answer 1 · answered Apr 17 '15 at 14:03

The easiest way now is actually using the @whenPolymerReady annotation on a function.

<script type="application/dart">
  import 'package:polymer/polymer.html';
  export 'package:polymer/init.dart';

  @whenPolymerReady
  void startup() {
    /// Custom code here, polymer is now initialized.
    var tabs = document.querySelector('paper-tabs');
    var list = document.querySelector('post-list');

    tabs.on['core-select'].listen((_) {
      list.show = tabs.selected;
    });
  }
</script>

I listed that in the linked question about custom main but doesn't hurt to mention it again of course. — Günter Zöchbauer, Apr 17 '15 at 14:05

score 0 · Accepted Answer · answered Apr 17 '15 at 07:29

app_element.html

imports ...

<polymer-element name="app-element>
  <template>
    <core-header-panel>
      <core-toolbar>
        <paper-tabs id="tabs" selected="all" self-end>
          <paper-tab name="all">All</paper-tab>
          <paper-tab name="favorites">Favorites</paper-tab>
        </paper-tabs>
      </core-toolbar>
      <div class="container" layout vertical center>
        <post-list show="all"></post-list>
      </div>
    </core-header-panel>
  </template>
  <script type="application/dart" src="app_element.dart"></script>
</polymer-element>

app_element.dart

@CustomTag('app-element')
class AppElement extends PolymerElement {
  AppElement.created() : super.created();

  ready() {
    var tabs = shadowRoot.querySelector('paper-tabs');
    // or shorter
    // var tabs = $['tabs']; 
    // because it has an id and is statically added
    var list = shadowRoot.querySelector('post-list');

    tabs.addEventListener('core-select', (e) {
      list.show = tabs.selected;
    });
  }
}

index.html

<html>
<head>
  <link rel="import" href="app_element.html">
</head>
<body>
  <app-element></app-element>
  <script type="application/dart">export 'package:polymer/init.dart'; </script>
</body>
</html>

but instead of adding the event handler imperatively you can do it declaratively (preferred method with Polymer)

app_element.html

imports ...

<polymer-element name="app-element>
  <template>
    <core-header-panel>
      <core-toolbar>
        <paper-tabs id="tabs" selected="all" self-end 
            on-core-select="{{coreSelectHandler}}">
          <paper-tab name="all">All</paper-tab>
          <paper-tab name="favorites">Favorites</paper-tab>
        </paper-tabs>
      </core-toolbar>
      <div class="container" layout vertical center>
        <post-list show="all"></post-list>
      </div>
    </core-header-panel>
  </template>
  <script type="application/dart" src="app_element.dart"></script>
</polymer-element>

app_element.dart

@CustomTag('app-element')
class AppElement extends PolymerElement {
  AppElement.created() : super.created();

  coreSelectHandler(Event e) {
      list.show = tabs.selected;
  }
  ready() {
    var list = shadowRoot.querySelector('post-list');
    ...        
  }
}

So, I have to do it in custom element? Can't I do this without creating a custom element? — Jawaid, Apr 17 '15 at 07:31
Sure you can if you take care of Polymer initialization as shown here http://stackoverflow.com/a/20982658/217408 but in my opinion this is the more convenient way. — Günter Zöchbauer, Apr 17 '15 at 07:33
Another way is to use `auto-binding-dart` (http://stackoverflow.com/a/28375442/217408) — Günter Zöchbauer, Apr 17 '15 at 07:45
OK, I think it is better to move to custom element where I have privilege to declaratively handle events. The second approach mentioned by Gunter Zochbauer — Jawaid, Apr 25 '15 at 06:59

Polymer.Dart Event Listening

2 Answers2