淘汰赛可见绑定失败

我试图做一些按钮隐形基于用户是否是的loggedIn与否，为了这个，我已经做了类似：淘汰赛可见绑定失败

我有一个名为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; 
});

我现在需要这个authmodule在我shell.js，也返回从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 LOO KS如下

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

因为我有四个明显的路线，我希望看到在顶部功能区4个按键，当阿贾克斯成功，当阿贾克斯未能我希望看到没有任何按键，但是这似乎并没有奏效不管ajax结果如何。

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

我已经看过

Knock out visible binding of anchor tag is not working

来源

2013-06-18 indichimp

你确定$ parent'会给你正确的上下文 –

里面ko.computed功能，你需要调用观察到的（即KO知道什么时候重新评估你的计算方式），如

return loggedIn();

然后当观察到的变化值计算值也将被更新。

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

来源

2013-06-18 16:06:16

马塞洛感谢您的回复我试过了，它确实工作。我将此标记为答案。上面@Damien提出的'订阅'解决方案也可以，但我猜这不是使用订阅的方式。我觉得这个答案更加正确。 – indichimp

我不得不说，你不应该使用计算作为事件处理程序。想象一下，如果你将3个元素绑定到isUserLoggedIn中，那么updateLoginStatus将被调用3次。但是，如果您希望updateLoginStatus函数仅在更改loggedIn时调用，则需要订阅属性loggedIn。这是subcribe功能的目的（在财产改变时通知）。 – Damien

我认为你不需要isUserLoggedIn财产。

因此，在按键绑定更换

visible: $parent.authmodule.isUserLoggedIn

通过

visible: $parent.authmodule.loggedIn

，并在主视图模型代替：

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

通过：

loggedIn.subscribe(updateLoginStatus);

我希望它有帮助。

来源

2013-06-18 15:10:06 Damien

非常感谢你的先生，这个工作，真的很感激它。我想我需要坐下来阅读关于淘汰赛的内容，而不是简单地阅读一些博客，尝试一些东西。 – indichimp

@indichimp：不客气。你可以看看这个帖子 http://www.knockmeout.net/2011/06/10-things-to-know-about-knockoutjs-on.html – Damien

淘汰赛可见绑定失败

回答

相关问题