Show/Hide Login/Logout 按键基于用户状态的Knockout

Question

我有一个登录表单（MVC 和 Knockout），我想根据用户状态显示或隐藏登录和注销按钮，如果用户已登录，则应显示注销按钮，反之亦然。

我已经尝试使用 visible 属性进行操作，但它无法正常工作，它总是显示登录按钮。

我在代码中设置注销按钮在登录后可见，登录按钮在注销后可见。

<form id="formLogin" data-bind="submit: login">
    <label>User ID</label>
    <input class="required email form-control" type="text" data-bind="value: loginUserName" name="loginUserName" />

    <label>Password</label>
    <input class="required form-control" type="password" data-bind="value: loginPassword" name="loginPassword" />

    <button type="submit" class="btn-orange" id="buttonLogin" data-bind="visible: showLoginButton">Log In</button> <br />
    <button data-bind="click: logout, visible: showLogoutButton" class="btn btn-default" id="buttonLogout">Log Out</button>
</form>

我的 Login.js 查看模型：

var Login= function () {

/////////////// variables ///////////////
var self = this;
...
self.showLoginButton = ko.observable(true);
self.showLogoutButton = ko.observable(false);

/////////////// functions ///////////////


self.login = function (callback) {
    var loginData = {
        grant_type: 'password',
        username: self.loginUserName(),
        password: self.loginPassword()
    };
    $.ajax({
        type: 'POST',
        url: '../API/Token',
        data: loginData
    }).done(function (data) {
        sessionStorage.setItem(tokenKey, data.access_token);
        localStorage.setItem("userID", self.loginUserName());
        self.authenticate();
        self.showLogoutButton(true);
        self.showLoginButton(false);
        if (callback && typeof callback == "function")
            callback();

        self.redirect('MyPage');
    }).fail(showError);
}

self.logout = function () {
    sessionStorage.removeItem(tokenKey)
    self.showLoginButton(true);
    self.showLogoutButton(false);
 }  
}

请指教

Answer 1

self.redirect('MyPage');是做什么的？如果它对页面进行了物理更改，则您不会保留可观察对象的状态。

Show/Hide Login/Logout 按键基于用户状态的Knockout

Show/Hide Login/Logout buttons based on the user state Knockout

javascript

knockout.js

login

visible