登錄幾個選項，顯示/隱藏其他字段

Question

我的頁面將包含2個登錄選項。

Alt。 1：數據庫名稱，用戶名和密碼的字段。 Alt 2：數據庫連接字符串的字段。

當您開始在替代方​​法1中的字段中輸入時，我想要將連接字符串字段隱藏起來並且相反......如果您開始在連接字符串字段中鍵入，我想要隱藏其他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/