简体   繁体   English

dom-if不会根据情况更新

[英]dom-if does not update according to the condition

I'm trying to build a simple login system and I have 2 different templates in it: One when the user is not logged in yet (which displays a "sign in" button), and one when the user is logged in (which displays the username) 我正在尝试构建一个简单的登录系统,并且其中有2个不同的模板:一个在用户尚未登录时(显示“登录”按钮),一个在用户登录时(显示)。用户名)

By default, the first one is displayed. 默认情况下,显示第一个。 But when the user is logged in, my first template is not destroyed and my second template is not displayed. 但是,当用户登录时,我的第一个模板没有被破坏,我的第二个模板也没有显示。

    <template is="dom-if" if="{{!logged}}" restamp="true">
        <div class="box" id="notLogged">
            <paper-button class="loginButton" on-tap="loginPopup"><iron-icon class="avatar" icon="account-circle"></iron-icon><span id="notLoggedMessage">Sign in</span></paper-button>
        </div>
    </template>

    <template is="dom-if" if="{{logged}}" restamp="true">
        <div class="box" id="logged">
            <paper-button class="loginButton" on-tap="logoutPopup">
                <img src="https://placehold.it/40x40" alt="user avatar" />
            </paper-button>
        </div>
    </template>

and now the script. 现在是脚本。 As you can see, I don't use any ajax yet because the service is not done yet. 如您所见,我尚未使用任何Ajax,因为该服务尚未完成。 So I'm faking it with "loginOk" value 所以我用“ loginOk”的值来伪造它

    Polymer({
        is: 'system-login',
        properties: {
            logged: {
                type: Boolean,
                value: false}
        },
        loginPopup: function (e) {
            loginWindow.open();
        },
        logoutPopup: function (e) {
            logoutWindow.open();
        },
        checkLogin: function () {
            var loginOk = 1;
            if (loginOk === 1) {
                this.logged === true;
                loginWindow.close();
            } else if (loginOk === 2) {
                errorMessage.style.display = "inline";
            } else {
                return;
            }
        }
    });

The problem is this.logged === true; 问题是this.logged === true; . === in JavaScript is a comparison operator and not an assignment operator. JavaScript中的===是比较运算符,而不是赋值运算符。 So what your code does is it compares the value and type of this.true with Boolean true and returns false (which you are not catching). 因此,您的代码执行的操作是将this.true的值和类型与Boolean true进行比较,并返回false(您未捕获)。

Changing it to this.logged = true should do the trick 将其更改为this.logged = true应该可以解决问题

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM