Polymer.Dart 事件监听

Question

我正在将 Sample Polymer Tutorial App 转换为 Dart.Polymer。应用教程在这里 [https://www.polymer-project.org/0.5/docs/start/tutorial/intro.html]

我面临的问题是 paper-tabs 事件监听。 Polymer 的 js 版本是：

  <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>

这是索引文件。我的 Dart 版本看起来像这样：

<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>

如何监听 paper-tabs core-select 事件来更新 Dart 中 script 标签下的标签内容？我试过了，但没用。

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

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

Answer 1

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>

但您可以通过声明方式添加事件处理程序（使用 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');
    ...        
  }
}

Answer 2

现在最简单的方法实际上是在函数上使用 @whenPolymerReady 注释。

<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>

Polymer.Dart 事件监听

Polymer.Dart Event Listening

javascript

events

dart

polymer

dart-polymer