Question

我试图根据用户是否登录来使一些按钮不可见，为此我做了类似的事情：

我有一个名为authmodule的模块，编码为：

define(function () {

var loggedIn = ko.observable(false);  // tried without observable too.

var updateLoginStatus = function () {
    // call the webapi using ajax and intercept the 401
    // if error is 401 set set loggedIn to false and
    // true otherwise.

    // set ajax call
    var options = {
        url: '/breeze/breeze/MicCheck123',
        type: 'GET',
        dataType: 'json'
    };

    // make call
    return $.ajax(options)
        .then(function (data) {
            loggedIn(true);
        })
        .fail(function (jqXhr, textStatus) {
            if (jqXhr.status == 401 || jqXhr.status == 404) {
                loggedIn(false);
            }
        });
};

// my ko.computed used in html to do visible binding
var isUserLoggedIn = ko.computed(function () {
    updateLoginStatus();
    return loggedIn;
});

var authmodule = {
    isUserLoggedIn: isUserLoggedIn,
    updateLoginStatus: updateLoginStatus
};

return authmodule;
});

我现在需要在我的shell.js中使用此authmodule，并从viewmodle返回相同的内容，如下所示

define(['durandal/system',
    'services/logger',
    'durandal/plugins/router',
    'config',
    'services/authmodule'],
function (system, logger, router, config, authmodule) {

    var shell = {
        activate: activate,
        authmodule: authmodule,
        router: router
    };
    return shell;

    function activate() {
        return boot();
    }

    function boot() {
        router.map(config.routes);
        return router.activate(config.startModule);
    }
}
);

和相应的shell.js的html如下所示

    <div class="navbar-inner navbar-secondary">
    <div class="btn-group">
        <!-- ko foreach: router.visibleRoutes -->
        <a data-bind="attr: { href: hash },
                      css: { active: isActive },
                      html: caption,
                      visible: $parent.authmodule.isUserLoggedIn"
           class="btn btn-info"></a>
        <!-- /ko -->
    </div>
    </div>

由于我有四条可见路线，我希望在ajax成功时顶部功能区中看到4个按钮，当ajax失败时，我希望看到没有按钮，但无论ajax结果是什么，这似乎都不起作用

有人可以帮我确定我到底错过了什么吗？

我已经看过了

Knock out visible binding of anchor tag is not working

Answer 1

我认为你不需要isUserLoggedIn属性。

因此，在按钮绑定中替换

visible: $parent.authmodule.isUserLoggedIn

通过

visible: $parent.authmodule.loggedIn

在主视图模型中替换：

var isUserLoggedIn = ko.computed(function () {
    updateLoginStatus();
    return loggedIn;
});

通过：

loggedIn.subscribe(updateLoginStatus);

我希望它有所帮助。

Answer 2

在ko.computed函数内部，你需要调用observable（这是ko在重新计算你的计算时知道的方式），比如

return loggedIn();

然后当该可观察变化的值时，计算值也将被更新。

可能在您的示例中，ajax调用应该只运行一次，而不是在计算内。

敲除可见的绑定失败

2 个答案: