dom-if不會根據情況更新

Question

我正在嘗試構建一個簡單的登錄系統，並且其中有2個不同的模板：一個在用戶尚未登錄時（顯示“登錄”按鈕），一個在用戶登錄時（顯示）。用戶名）

默認情況下，顯示第一個。 但是，當用戶登錄時，我的第一個模板沒有被破壞，我的第二個模板也沒有顯示。

    <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應該可以解決問題