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

Question

我有一个KnockoutJS和可见的绑定快速（希望简单）的问题。我似乎无法让它为下面的代码工作。所有它应该做的是显示一个表单，而“signedIn”是假的，一旦表单被提交，表单应该消失，并且应该显示“你已经以（用户名）登录”。

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

目前我没有看到绑定似乎工作，因为它总是显示形式和总是显示“您的登录身份为”文本。我觉得我失去了一些明显的东西，但我希望一组新鲜的眼睛可以帮助我找到它。如果有任何帮助，我正在使用Visual Studio 2013。

Answer 1

如果您直接绑定到诸如data-bind="visible: signedIn等可观察对象，则可以使用()来敲除可观察函数，而不必调用可观察函数。但是，只要你在绑定的observable上做了一些事情，例如否定它，或者如果你使用了一个相等性检查，那么在取消它或比较它之前，你需要调用observable函数来读取它的值。

因此，在你的代码，你需要调用观察到的功能如下：

data-bind="visible: !signedIn() 

鉴于此，我认为它总是调用函数观察到避免出错，如这个最佳实践。

而不是使用jQuery来获得用户名的价值使用敲除value绑定来做到这一点。

由于您使用的是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