javascript - 如何正确使用KnockoutJS可见绑定(bind)？

Question

我在 KnockoutJS 和可见绑定(bind)方面遇到了一个快速(希望很简单)的问题。我似乎无法让它适用于下面的代码。它应该做的就是在“signedIn”为 false 时显示一个表单，提交表单后，该表单应该消失，并且应该显示“您以(用户名)身份登录”。

<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);
    }
}

目前，我的可见绑定(bind)似乎都不起作用，因为它始终显示表单并始终显示“您已登录”文本。我觉得我错过了一些明显的东西，但我希望一双新的眼睛可以帮助我找到它。我正在使用 Visual Studio 2013(如果有帮助的话)。

Answer 1

使用 Knockout observables，如果您直接绑定(bind)到 observable，例如 data-bind="visible:signedIn，则不必使用 () 调用 observable 函数但是，一旦您在绑定(bind)中对可观察量执行某些操作(例如对其取反)或者使用相等性检查，那么您将需要先调用可观察函数来读取该值，然后再对其进行否定或比较。

因此，在您的代码中，您需要按如下方式调用可观察函数:

data-bind="visible: !signedIn()

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

不要使用 jquery 来获取用户名的值，而是使用 Knockout value必须这样做。

由于您正在使用 knockout submit绑定(bind)时不需要使用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