Dart 核心页面选择器检测

Question

我正在尝试通过 Polymer 元素中的核心页面来完成页面更改检测 http://www.polymer-project.org/docs/elements/core-elements.html#core-pages ，所以我可以为每个加载适当的方法。现在，Dart 代码片段在 init 方法(应用程序启动时启动的第一个方法)中初始化。我不确定如何跟踪页面何时更改以及检测更新的好方法(因此我至少可以在下面的代码段中看到不同的 LOG 更新)。该代码与这个问题密切相关: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

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

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

  @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)更改选择时它是否会触发，并且您还需要访问 event.details 以获取实际选择的页面。