polymer selector doesn't fire tab selection change when selected tab is initialised in ready

问题

Just filed an issue https://github.com/ErikGrimes/polymer_elements/issues/117. Reproducing here.

I'm using a polymer-ui-tabs with a polymer-ui-pages and it doesn't reliably change the page when a tab clicked.

To reproduce use the code below. Then

observe that the Two tab is selected and the Two page is shown
click on the Three tab is selected and the Three page is shown
click on the Two tab. The content still shows the Three page

Repeat with the selectedTab = 1; removed from the dart code. Now the tabs work correctly.

polymer_tabs_issue.html

<!DOCTYPE html>
<polymer-element name="polymer-tabs-issue" attributes="selectedTab">

  <link rel="import" href="packages/polymer_ui_elements/polymer_ui_tabs/polymer_ui_tabs.html">
  <link rel="import" href="packages/polymer_ui_elements/polymer_ui_pages/polymer_ui_pages.html">
  <link rel="import" href="packages/polymer_elements/polymer_layout/polymer_layout.html">

  <template>
    <style type="text/css">
      polymer-ui-tabs {
        width: 100%;
        height: 70px; /* not sure why need to set height */
      }
      polymer-ui-pages {
        width: 100%;
        border: 1px solid gray;
        margin: 0px 5px 5px 5px;
      }
      polymer-ui-tabs > * {
        width: 30%;
      }
    </style>

    <div style="width:100%;height:100%;">
      <polymer-layout vertical></polymer-layout>

      <div>
        <polymer-layout></polymer-layout>
        <polymer-ui-tabs selected="{{selectedTab}}">
          <span>One</span>
          <span>Two</span>
          <span>Three</span>
        </polymer-ui-tabs>
        <div flex></div>
      </div>

      <polymer-ui-pages selected="{{selectedTab}}" flex>
          <span>One</span>
          <span>Two</span>
          <span>Three</span>
      </polymer-ui-pages>      
    </div>

  </template>

  <script type="application/dart" src="polymer_tabs_issue.dart">
  </script>

</polymer-element>

index.html

<!doctype html>

<html>
  <head>
    <title>polymer tabs issue</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="import" href="polymer_tabs_issue.html">
    <link rel="import" href="packages/polymer_elements/polymer_layout/polymer_layout.html">
  </head>
  <body>
    <polymer-layout></polymer-layout>
    <polymer-tabs-issue flex></polymer-tabs-issue>

    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

polymer-tabs-issue.dart

library polymer_tabs_issue;

import 'package:polymer/polymer.dart';

@CustomTag('polymer-tabs-issue')
class PolymerTabsIssueElement extends PolymerElement  {

  @published
  dynamic selectedTab;

  PolymerTabsIssueElement.created(): super.created();

  @override
  void ready() {
    selectedTab = 1;
  }

}

回答1:

can you please try

  @override
  void ready() {
    selectedTab = '1';
  }

It worked for me but my polymer-selection/polymer-selector alredy contain some modifications not yet published

来源：https://stackoverflow.com/questions/22122280/polymer-selector-doesnt-fire-tab-selection-change-when-selected-tab-is-initiali

标签

dart

dart-polymer