当选中的选项卡初始化就绪时，聚合物选择器不会激活选项卡选项更改 [英] polymer selector doesn't fire tab selection change when selected tab is initialised in ready
问题描述
刚提出问题 https://github.com/ErikGrimes/polymer_elements/issues/117 。在这里复制。
我使用的是一个polymer-ui-tabs与一个聚合物ui页面，它不能可靠地更改页面，当一个标签页。 / p>
要复制使用下面的代码。然后
-
观察到选择了
选项卡并显示两个选项卡，三页面显示两个页面 三页 -
点击
三页
selectedTab = 1; 从dart代码中删除。
$ b
<！DOCTYPE html>
< polymer-element name =polymer-tabs-issueattributes =selectedTab>
< link rel =importhref =packages / polymer_ui_elements / polymer_ui_tabs / polymer_ui_tabs.html>
< link rel =importhref =packages / polymer_ui_elements / polymer_ui_pages / polymer_ui_pages.html>
< link rel =importhref =packages / polymer_elements / polymer_layout / polymer_layout.html>
< template>
< style type =text / css>
polymer-ui-tabs {
width：100％;
height：70px; / *不确定为什么需要设置高度* /
}
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>一个< / span>
< span>两个< / span>
< span>三< / span>
< / polymer-ui-tabs>
< div flex>< / div>
< / div>
< polymer-ui-pages selected ={{selectedTab}}flex>
< span>一个< / span>
< span>两个< / span>
< span>三< / span>
< / polymer-ui-pages>
< / div>
< / template>
< script type =application / dartsrc =polymer_tabs_issue.dart>
< / script>
< / polymer-element>
index.html
<！doctype html>
< html>
< head>
< title>聚合物标签问题< / title>
< meta charset =utf-8>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge，chrome = 1>
< link rel =importhref =polymer_tabs_issue.html>
< link rel =importhref =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'）
类PolymerTabsIssueElement扩展PolymerElement {
@published
dynamic selectedTab;
PolymerTabsIssueElement.created（）：super.created（）;
@override
void ready（）{
selectedTab = 1;
}
}
您可以试试
@override
void ready b $ b selectedTab ='1';
}
它适用于我，但我的聚合物选择/聚合物选择器alredy包含一些修改尚未发布
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
Twotab is selected and theTwopage is shownclick on the
Threetab is selected and theThreepage is shownclick on the
Twotab. The content still shows theThreepage
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;
}
}
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
这篇关于当选中的选项卡初始化就绪时，聚合物选择器不会激活选项卡选项更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
