使用多个选项登录，显示/隐藏其他字段

Question

我的页面将包含 2 种登录替代方案。

替代项 1 ： 数据库名称、用户名和密码字段。替代项 2：数据库连接字符串的字段。

当您开始在备选方案 1 中键入字段时，我希望连接字符串字段隐藏并相反......如果您开始在连接字符串字段中键入内容，我希望隐藏其他 3 个字段。

有没有一种简单的方法可以通过敲除验证来实现这一点？

正手感谢！

Answer 1

假设您的值是视图模型的一部分，则可以使用 data-bind 中的 visible 属性来检查值的长度：

样品小提琴：http://jsfiddle.net/RkaB3/1/

查看模型：

var ViewModel = function () {
    var self = this;
    self.alt1 = ko.observable('');
    self.alt2 = ko.observable('');
};
ko.applyBindings(new ViewModel());

标记：

<div data-bind="visible: alt2().length == 0">
    <p>Alt1 Login</p>
    <input data-bind="value: alt1"></input>
</div>
<div data-bind="visible: alt1().length == 0">
    <p>Alt2 Login</p>
    <input data-bind="value: alt2"></input>
</div>    

您可能希望在包含 3 个字段的Alt1选项上做一些更智能的事情。例如，使用一个 ko.computed 函数来检查所有 3 个字段，如果其中任何一个字段包含值，则返回 true：

更新了带有计算的小提琴

self.usingLoginAlternative1 = ko.computed(function () {
    return !self.connectionString();
});
self.usingLoginAlternative2 = ko.computed(function () {
    return !(self.server() || self.database() || self.userId() || self.password());
});

http://jsfiddle.net/RkaB3/4/