Polymer.Dart 事件监听答案

【问题标题】：Polymer.Dart Event ListeningPolymer.Dart 事件监听
【发布时间】：2015-06-23 19:55:54
【问题描述】：

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

我面临的问题是纸张标签事件监听。 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 中的标签内容？我试过了，但没有用。

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

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

【问题讨论】：

您可以尝试tabs.on['core-select'].listen(...)（请参阅stackoverflow.com/questions/13897091），但我怀疑您遇到了与stackoverflow.com/questions/29629492 此处提到的相同的问题。如果您运行代码从 main() 查询 Polymer 元素，您需要确保 Polymer 已正确初始化。
这实际上是问题所在。我没有使用 main() 那么我在哪里编写该脚本？

标签： javascript events dart polymer dart-polymer

【解决方案1】：

现在最简单的方法实际上是在函数上使用@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>

【讨论】：

我在关于自定义 main 的链接问题中列出了这一点，但当然再次提及它也没有什么坏处。

【解决方案2】：

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

【讨论】：

那么，我必须在自定义元素中这样做吗？我不能在不创建自定义元素的情况下执行此操作吗？
当然可以，如果您按照此处stackoverflow.com/a/20982658/217408 所示处理聚合物初始化，但我认为这是更方便的方法。
另一种方法是使用auto-binding-dart (stackoverflow.com/a/28375442/217408)
好的，我认为最好转移到我有权以声明方式处理事件的自定义元素。 Gunter Zochbauer 提到的第二种方法