文章/答案/技术大牛

发布

社区首页 >问答首页 >Polymer.Dart事件侦听

问Polymer.Dart事件侦听
EN

Stack Overflow用户

提问于 2015-04-17 05:34:50

回答 2查看 98关注 0票数 1

我正在将示例聚合物教程应用程序转换为Dart.Polymer。应用教程在这里[https://www.polymer-project.org/0.5/docs/start/tutorial/intro.html]

我所面临的问题是如何收听纸质标签事件。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>

我如何听纸标签核心选择事件，以更新我的Dart在脚本标签下的选项卡内容？我试过了但没成功。

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

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

dart-polymer

javascript

events

dart

polymer

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-04-17 07:29:08

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>

但是，您可以声明性地添加事件处理程序，而不是强制添加事件处理程序(使用聚合物的首选方法)。

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

票数 0

Stack Overflow用户

发布于 2015-04-17 14:03:18

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

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29691166

复制

相似问题

问Polymer.Dart事件侦听
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Polymer.Dart事件侦听EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Polymer.Dart事件侦听
EN