[英]Why in some case the selected of the iron-page doesn't work?
I made a function to change the "selected" attribute in the iron -page and running, but in some cases the "selected" attribute returns the last value giving the feeling of not changing. 我做了一个函数来更改Iron-page中的“ selected”属性并运行,但是在某些情况下,“ selected”属性返回最后一个值,使人感觉没有变化。
The element 元素
<template is="dom-bind" id="fulltemplate">
<div id="fullContainer" class="vertical layout flex" hidden>
<iron-pages id="pages" class="fancy flex center center-justified" selected="{{pageSelected}}" unresolve>
<div id="logincontainer" class="flex horizontal layout center center-justified">
<paper-material class="shadowbox vertical layout" elevation="3">
<div class="hiddenof">
<h4 id="loginTitle"><iron-icon class="icnadviser" icon="iconnadviser"></iron-icon><span>{{loginTitle}}</span></h4>
<h5 id="changePassword" hidden class="red">{{changePassword}}</h5>
<section>
<paper-input-container id="usernamedecorator">
<label>{{labuser}}</label>
<input id="usernameinput" pattern="[0-9]*" bind-value="{{valUsername}}" is="iron-input" onkeypress="keyPressLogin(event)" required>
<paper-input-error>{{errorInputUser}}</paper-input-error>
</paper-input-container>
<paper-input-container id="passworddecorator">
<label>{{labpass}}</label>
<input id="passwordinput" bind-value="{{valPassword}}" is="iron-input" maxlength='15' onkeypress="keyPressLogin(event)">
<paper-input-error>{{errorInputPass}}</paper-input-error>
</paper-input-container>
<paper-input-container id="confirmpassdecorator" hidden="true">
<label>{{labpass}}</label>
<input id="Text1" bind-value="{{valCPassword}}" is="iron-input" maxlength='15' onkeypress="keyPressLogin(event)">
<paper-input-error>{{errorInputPass}}</paper-input-error>
</paper-input-container>
</section>
<div id="bottomline" class="horizontal layout center">
<div class="clickable red medium flex" id="forgpassText" onclick="goto(1)">{{forgpassText}}</div>
<%--<paper-item class="clickable red medium flex" id="forgpassText" onclick="goto(1)">{{forgpassText}}</paper-item>--%>
<paper-spinner id="spinner" hidden></paper-spinner>
<paper-button id="loginButton" raised class="buttonNeutral" onclick="clickLogin(event);">{{btentrar}}</paper-button>
</div>
<paper-toast
id="errorToast"
duration="4000">
</paper-toast>
</div>
</paper-material>
</div>
<div id="passremcontainer" class="flex horizontal layout center center-justified">
<paper-material class="shadowbox vertical layout" elevation="3">
<div class="hiddenof">
<div class="titbox justify">
<p id="rempassTit" class="big bold center">
<iron-icon class="icnadviser" icon="iconnadviser"></iron-icon><span>{{rempassTit}}</span>
</p>
<p id="rempassSub" class="medium">{{rempassSub}}</p>
</div>
<div class="horizontal layout center-justified">
<section class="notoppadding">
<paper-input-container id="passreqdecorator">
<label>{{labemail}}</label>
<input id="passreqinput" bind-value="{{valmailpass}}" is="iron-input" onkeypress="keyPressLogin(event)">
<paper-input-error>{{fieldRequired}}</paper-input-error>
</paper-input-container>
</section>
</div>
<div class="horizontal layout">
<div class="flex"></div>
<paper-button id="cancelPassB" raised class="buttonCancel" onclick="goto(0)">{{btcancelar}}</paper-button>
<paper-button id="acceptPassB" raised class="buttonNeutral" onclick="sendpassreq()">{{btenviar}}</paper-button>
<paper-spinner id="passspinner" hidden></paper-spinner>
</div>
<paper-toast
id="remToast"
duration="2000">
</paper-toast>
</div>
</paper-material>
</div>
<div id="masinfoDiv" class="flex horizontal layout center center-justified">
<paper-material class="shadowbox bigboxshadow layout vertical" id="infoshadow" elevation="3">
<div id="infoDivScroll" class="hiddenof flex vertical layout">
<div class="titbox justify" class="bigboxshadow">
<p id="moreinfoTit" class="big bold center-text"><iron-icon class="icnadviser" icon="iconnadviser"></iron-icon><span>{{moreinfoTit}}</span></p>
<p id="moreinfoSub" class="medium">{{moreinfoSub}}</p>
</div>
<div id="masinfoContent" class="flex horizontal layout center-justified redim">
<section class="notoppadding flex">
<paper-input-container id="nomapedeco">
<label>{{labnomape}}</label>
<input id="nomapeinput" is="iron-input">
<paper-input-error>{{fieldRequired}}</paper-input-error>
</paper-input-container>
<paper-input-container id="empresadeco">
<label>{{labempresa}}</label>
<input id="empresainput" is="iron-input">
<paper-input-error>{{fieldRequired}}</paper-input-error>
</paper-input-container>
<paper-input-container id="actecodeco">
<label>{{labactecon}}</label>
<input id="actecoinput" is="iron-input">
<paper-input-error>{{fieldRequired}}</paper-input-error>
</paper-input-container>
<paper-input-container id="tlfdeco">
<label>{{labtlf}}</label>
<input id="tlfinput" is="iron-input">
<paper-input-error>{{fieldRequired}}</paper-input-error>
</paper-input-container>
<paper-input-container id="maildeco">
<label>{{labemail}}</label>
<input id="mailinput" is="iron-input">
<paper-input-error>{{fieldRequired}}</paper-input-error>
</paper-input-container>
<paper-input-container id="consultadeco">
<label>{{labconsulta}}</label>
<input id="consultainput" is="iron-input">
<paper-input-error>{{fieldRequired}}</paper-input-error>
</paper-input-container>
</section>
</div>
<div class="horizontal layout" id="masinfoBotones">
<div class="horizontal end-justified layout flex">
<paper-button id="cancelInfoB" raised class="buttonCancel" onclick="goto(0)">{{btcancelar}}</paper-button>
<paper-button id="acceptInfoB" raised class="buttonNeutral" onclick="sendinforeq()">{{btenviar}}</paper-button>
</div>
<paper-spinner id="infospinner" hidden></paper-spinner>
</div>
<paper-toast
id="infoToast"
duration="4000">
</paper-toast>
</div>
</paper-material>
</div>
<div id="whatiscontainer" class="flex horizontal layout center center-justified">
<paper-material class="shadowbox layout vertical" id="whatischadow" elevation="3">
<div>
<div class="titbox justify">
<p id="whatistit" class="big bold center">
<iron-icon class="icnadviser" icon="iconnadviser"></iron-icon><span>{{whatis}}</span>
</p>
</div>
<div horizontal layout center-justified>
<section class="notoppadding">
<p class="medium">{{whatisContent}}</p>
</section>
</div>
</div>
</paper-material>
</div>
</iron-pages>
</div>
</template>
Function 功能
function goto(i){
var maintemplate = document.querySelector('#fulltemplate');
if(i==0){
document.getElementById("pagesubtitle").removeAttribute("hidden");
document.getElementById("lefttopbar").removeAttribute("hidden");
document.querySelector("#iconinfo").removeAttribute("hidden");
maintemplate.pageTitle = "<%= Resources.GlobalResources.TITLE %>";
} else if(i==2){
maintemplate.pageTitle = "<%= Resources.GlobalResources.MASINFORMACION %>";
document.getElementById("pagesubtitle").setAttribute("hidden", true);
document.getElementById("lefttopbar").setAttribute("hidden", true);
document.querySelector("#iconinfo").setAttribute("hidden", true);
}
maintemplate.pageSelected = i;
}
Any ideas to correct the problem ? 有解决问题的想法吗?
Thanks for your time. 谢谢你的时间。
You could try using 您可以尝试使用
this.pageSelected
instead of using a property of the maintemplate as 'this' refers to your custom element. 而不是使用maintemplate的属性,因为“ this”是指您的自定义元素。 Hope that helps. 希望能有所帮助。
Another option would be is to select the iron-pages element and directly set the selected property 另一个选择是选择Iron-pages元素并直接设置selected属性
this.$.pages.selected = i;
Cheers 干杯
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.