3

我是 KO 和 JS 的新手，并进行了以下测试。我想在什么时候看到登录按钮，在什么时候看到vm.authenticated == false注销按钮vm.authenticated == true。我看到标题正确更改，所以我似乎绑定正常，但 KOif似乎不起作用。我试图使authenticatedobservable 但这确实解决了它。任何帮助表示赞赏。

感谢和问候

这是HTML代码：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>Test</title>
</head>

<body>
    <script src="../Scripts/libs/jquery-1.9.0.js"></script>
    <script src="../Scripts/libs/knockout-2.2.1.debug.js"></script>

    <p data-bind="text: title"></p>
    <!-- ko if: authenticated == false -->
    <form>
        <input type="text" data-bind="value: userId"/>
        <input type="password" data-bind="value: password"/>
        <button type="button" data-bind="click: login">Login</button>
    </form>
    <!-- /ko -->
    <!-- ko if: authenticated == true -->
    <form>
        <input type="text" data-bind="value: userId"/>
        <button type="button" data-bind="click: logout">Logout</button>
    </form>
    <!-- /ko -->

    <script type="text/javascript">
        window.onload = function () {
            var vm = {userId: 'user', password: 'password', title: 'unsigned', authenticated: false, login: function () {
                    var vm1 = {
                        userId: 'user', password: 'password', title: 'unsigned1', authenticated: true, login: function () { }, logout: function () {
                            var vm2 = { userId: 'user', password: 'password', title: 'unsigned2', authenticated: false, login: function () { }, logout: function () { } };
                            ko.applyBindings(vm2); 
                        }
                    };
                    ko.applyBindings(vm1); 
                }, logout: function () { }
            };
            ko.applyBindings(vm); 
        };
    </script>    
</body>
</html>
4

2 回答 2

1

这是你想要达到的目标吗？

var vm = {
    userId: 'user',
    password: 'password',
    title: ko.observable('unsigned'),
    authenticated: ko.observable(false),
    login: function () {
        vm.userId = 'user';
        vm.password = 'password';
        vm.title('unsigned1');
        vm.authenticated(true);
    },
    logout: function () {
        vm.userId = 'user';
        vm.password = 'password';
        vm.title('unsigned2');
        vm.authenticated(false)
    }
};

ko.applyBindings(vm);

还要注意 ben336 所说的关于如何定义绑定的内容。

于 2013-01-24T20:46:58.850 回答
0 
<!-- ko if: authenticated == true -->

应该

<!-- ko if: authenticated -->

if 表达式验证变量的真实性，而不是表达式。

请参阅文档

为了

<!-- ko if: authenticated == false -->

您可以使用

<!-- ko ifnot: authenticated  -->

更新

我没有马上注意到你的三重绑定。您应该注册一个要绑定的模型对象。如果您希望属性响应更新，可以将其设为可观察的。

于 2013-01-24T20:09:49.330 回答