Dart 核心页面选择器检测

Question

我正在尝试通过聚合物元素中的核心页面完成页面更改检测 http://www.polymer-project.org/docs/elements/core-elements.html#core-pages ，这样我就可以为每个方法加载适当的方法。现在，Dart 代码片段在 init 方法中初始化(应用程序启动时启动的第一个方法)。我不确定如何跟踪页面何时更改，以及检测更新的好方法(所以我至少可以在下面的代码片段中看到不同的日志更新)。该代码与这个问题密切相关:Google Dart Pages within Tabs 。如果您需要更多信息，请告诉我。

HTML:

 <paper-tabs id="Tabs" selected="{{page}}" style='width:800px; height:50px; color:#333333;'>
      <paper-tab>Display 1</paper-tab>
      <paper-tab>Display 2</paper-tab>
    </paper-tabs>

    <core-pages selected="{{page}}">
   </core-pages>

Dart :

@observable int page = 0;

var pages = shroot.querySelector("core-pages");
     pages.onChange.listen((e) {
            //keep for debugging
                 if (pages == 0) {
                   _LOG.info("properties 1 selected");
                   display();
                 } else if (pages == 1) {
                   _LOG.info("properties 2 selected");
                   display();
                 }
          });

Answer 1

我在 core-pages 或其父类(super class)中找不到任何 change 事件。

我认为这是最简单的方法:

  @observable int page = 0;

  void pageChanged(oldValue, newValue) {
  //keep for debugging
    if (page == 0) {
      _LOG.info("properties 1 selected");
      display();
    } else if (page == 1) {
      _LOG.info("properties 2 selected");
      display();
    }
  }

如果您更喜欢监听事件，core-pages 扩展了 core-selector，它具有
- core-select - 发送两次以取消选择(旧)和选择(新)。您需要访问事件详细信息才能知道它是哪一个，目前这很困难，因为您需要 dart-js-interop
- core-activate - 当点击项目元素时触发。不确定当选择通过绑定(bind)发生变化时是否会触发，并且您还需要访问事件。详细信息以获取实际选择的页面。