CODEWITHSUNDEEP
javascripteventsdartpolymerdart-polymer
Jawaid
Jawaid

Reputation: 109

Polymer.Dart Event Listening

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

Upvotes: 1

Views: 101

Answers (2)

Jake MacDonald
Jake MacDonald

Reputation: 1348

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>

Upvotes: 1

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657058

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

Upvotes: 0

Related Questions