Question

我是KO和JS的新手，并做了以下测试。我希望在vm.authenticated == false时看到登录按钮，在vm.authenticated == true时看到登出按钮。我看到标题正确改变所以我似乎绑定好了，但是KO if似乎没有用。我试图使authenticated可观察，但确实解决了这个问题。任何帮助表示赞赏。

谢谢＆amp;此致

以下是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>

Answer 1

this你想要实现的目标是什么？

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关于如何定义绑定的说法。

Answer 2

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

应该是

<!-- ko if: authenticated -->

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

请参阅documentation

用于

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

你可以使用

<!-- ko ifnot: authenticated  -->

更新

我没有立刻注意到你的三重绑定。您应该注册要绑定的单个模型对象。如果您希望属性响应更新，则可以使其成为可观察的。

Knockout JS Binding Update Confusion

2 个答案:

更新