聚合物选择器不会在准备就绪时初始化选定的选项卡时闪光选项卡选择更改答案

【问题标题】：polymer selector doesn't fire tab selection change when selected tab is initialised in ready聚合物选择器不会在准备就绪时初始化选定的选项卡时闪光选项卡选择更改
【发布时间】：2014-04-03 01:20:36
【问题描述】：

刚刚提交了一个问题https://github.com/ErikGrimes/polymer_elements/issues/117。在这里复制。

我正在使用带有 polymer-ui-pages 的 polymer-ui-tabs，当点击标签时它不能可靠地更改页面。

要重现使用下面的代码。那么

观察Two选项卡被选中并显示Two页面
点击Three标签被选中并显示Three页面
单击Two 选项卡。内容依旧显示Three页面

重复从飞镖代码中删除selectedTab = 1;。现在标签可以正常工作了。

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

}

【问题讨论】：

标签： dart dart-polymer

【解决方案1】：

你可以试试

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

它对我有用，但我的聚合物选择/聚合物选择器已经包含一些尚未发布的修改

【讨论】：

谢谢甘特。完美运行。一百万年都不会想到