Question

我正在尝试构建一个简单的登录系统，其中有两个不同的模板：一个是用户尚未登录时（显示“登录”按钮），另一个是用户登录时（显示用户名）

默认情况下，会显示第一个。但是当用户登录时，我的第一个模板不会被销毁，我的第二个模板也不会显示。

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

现在是脚本。如您所见，我还没有使用任何ajax，因为服务还没有完成。所以我用“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;
            }
        }
    });

Answer 1

问题是this.logged === true;。 JavaScript中的===是比较运算符，而不是赋值运算符。因此，您的代码所做的是将this.true的值和类型与Boolean true进行比较，并返回false（您没有捕获）。

将其更改为this.logged = true应该可以解决问题

dom-if不根据条件更新

1 个答案: