Dart 核心页面选择器检测答案

【问题标题】：Dart Core Pages Selector DetectionDart 核心页面选择器检测
【发布时间】：2014-11-25 10:53:06
【问题描述】：

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

飞镖：

@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();
                 }
          });

【问题讨论】：

我似乎看不到任何 LOG 输出。它实际上设置正确吗？

标签： dart dart-polymer paper-elements core-elements

【解决方案1】：

我在core-pages 或其超类中找不到任何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 - 当一个项目元素被点击时触发。不确定是否在选择通过绑定时触发，并且还需要访问event.detail以获取实际选择哪个页面。

【讨论】：

如果你在同一个类中有一个@observable int page = 0，只要page 的值发生变化，就会调用pageChanged。这是Observable 的一个功能（扩展PolymerElement 时会自动获得该功能

【解决方案2】：

这是我用来在核心页面上获取选择更改事件的方法：

<core-pages on-core-select='{{pageChange}}' id='pager' selected="{{page}}">
  <!-- content page widgets -->
</core-pages>

然后在 Dart 中

void pageChange(Event e, d, _){
  e.stopPropagation();
  e.preventDefault();
  if(d['item'] is! ContentPage) return;

  if (d['isSelected']){
    d['item'].loaded();
  }else{
    d['item'].unloaded();
  }
}

我所有的内容页面都实现了一个具有.loaded() 和.unloaded() 方法的mixin ContentPage，所以我就是这样提醒每个内容页面它现在被选中或未选中。我这样做是因为 core-pages 在运行时会将所有内容加载到 DOM 中。

【讨论】：