Question

我对KnockoutJS和可见绑定有一个快速（希望很简单）的问题。我似乎无法让它适用于下面的代码。它应该做的只是在＆＃34; signedIn＆＃34;是错误的，一旦提交表单，表单就会消失，并且应该显示＆＃34;您已登录为（用户名）＆＃34;。

<form class="pad-bottom" data-bind="visible: !signedIn, submit: signIn"      onsubmit="signIn()">
    <div class="form-group">
        <label for="username">Sign In</label>
        <input class="form-control" type="text" name="username" id="username"  placeholder="Enter your userame" />
    </div>
  <button type="submit" class="btn btn-primary">Sign In</button>  
    <br />
</form>

<div data-bind="visible: signedIn">
    <p>You are signed in as <strong data-bind="text: username"></strong></p>

var vm = {
    username: ko.observable(),
    signedIn: ko.observable(false),

    signIn: function () {
        vm.username($('#username').val());
        vm.signedIn(true);
    }
}

目前，我的所有可见绑定似乎都没有工作，因为它始终显示表单并始终显示＆＃34;您已登录为＆＃34;文本。我觉得我错过了一些明显的东西，但我希望一双新鲜的眼睛可以帮助我找到它。如果有任何帮助，我使用的是Visual Studio 2013。

Answer 1

使用Knockout observable，如果直接绑定到()这样的observable，则不必使用data-bind="visible: signedIn来调用observable函数。但是只要在绑定中对observable执行某些操作（例如否定它或者使用等式检查），就需要调用observable函数以在取消或比较之前先读取值。

因此，在您的代码中，您需要按如下方式调用observable函数：

data-bind="visible: !signedIn()

鉴于此，我认为最好始终调用可观察函数以避免此类错误。

使用Knockout value绑定代替使用jquery来获取username的值。

由于您使用的是Knockout submit绑定，因此无需使用onsubmit。

<form class="pad-bottom" data-bind="visible: !signedIn(), submit: signIn">
    <div class="form-group">
        <label for="username">Sign In</label>
        <input data-bind="value: username" class="form-control" type="text" name="username" id="username"  placeholder="Enter your userame" />
    </div>
  <button type="submit" class="btn btn-primary">Sign In</button>  
    <br />
</form>

var vm = {
    username: ko.observable(),
    signedIn: ko.observable(false),

    signIn: function () {
        vm.signedIn(true);
    }
};

JsFiddle

如何正确使用KnockoutJS可见绑定？

1 个答案: