Question

我的页面将包含2个登录选项。

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

当您开始在替代1中的字段中键入时，我希望connectionstring字段隐藏并且相反...如果您开始输入connectionstring字段，我希望隐藏其他3个字段。

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

感谢正手！

Answer 1

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

示例小提琴：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/

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

1 个答案: