使用铁页选择时初始化元素。
使用铁页选择时初始化元素。
提问于 2015-10-01 18:41:09
每当元素使用铁页呈现时，我都想初始化它。
在jsbin中执行以下操作
- 点击“Toggle”
- 单击“切换步骤”
- 点击“Toggle”
- 再次单击“Toggle”
我希望看到‘步骤a’。当x-示例指定‘step=’a‘时。然而，我看到了‘步骤b’。有任何方法来显示‘步骤a’时，当你-例子显示？
jsbin：http://jsbin.com/regapemoqe/1/edit?html,output
代码：
<meta charset="utf-8">
<base href="http://polymer-magic-server.appspot.com/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="iron-pages/iron-pages.html" rel="import">
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<x-example></x-example>
<dom-module id="x-example">
<style>
:host {
display: block;
}
</style>
<template>
<button on-click="toggleSelection">Toggle</button>
<iron-pages
attr-for-selected="data-route"
selected=[[selected]]>
<section data-route="one">
<p>This is the one</p>
</section>
<section data-route="two">
<p>This is the other one</p>
<y-example
step="a"></y-example>
</section>
</iron-pages>
</template>
<script>
// only need this when both (1) in the main document and (2) on non-Chrome browsers
addEventListener('WebComponentsReady', function() {
Polymer({
is: "x-example",
properties: {
selected: {
type: String,
value: 'one'
}
},
toggleSelection: function() {
this.selected = (this.selected == 'one')?'two':'one';
}
});
});
</script>
</dom-module>
<dom-module id="y-example">
<style>
:host {
display: block;
}
</style>
<template>
<iron-pages
attr-for-selected="data-step"
selected="[[step]]">
<section data-step="a"><p>This is step a</p></section>
<section data-step="b"><p>This is step b</p></section>
</iron-pages>
<button on-click="toggleStep">Toggle step</button>
</template>
<script>
addEventListener('WebComponentsReady', function() {
Polymer({
is: "y-example",
properties: {
step: {
type: String,
value: 'a'
}
},
toggleStep: function() {
this.step = (this.step == 'a')?'b':'a'
}
});
});
</script>
</dom-module>
</body>回答 1
Stack Overflow用户
回答已采纳
发布于 2015-10-02 08:12:41
您可以在toggleSelection元素的x-example函数中执行这样的操作：
toggleSelection: function() {
this.$$('y-example').step='a';
this.selected = (this.selected == 'one')?'two':'one';
}见此处：http://jsbin.com/tewaqa/edit?html,output
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32894625
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号