Question

我試圖根據列表中的選擇顯示或隱藏div。我不太清楚如何處理傳遞給函數的div的observable，以便它可以返回true或false值來顯示或隱藏div。

如果從列表中選擇了「美國運通」，我想顯示「postalCodeDiv」，否則將其隱藏。

我有一個撥弄它here

<label for="Card Type">Card Type</label> 
    <select data-bind='value: cardType, options: $root.cardTypeList, optionsText: "type"'> 
    </select>  

<div data-bind="visible: postalCodeDiv()"> 
    <label for="PostalCode">Postal Code (required for AMEX) 
    </label> 
</div> 

這裏是JavaScript的

function cardTypeSelection(cardType,postalCodeDiv){ 
    var self = this; 
    self.cardType = cardType; 
    self.postalCodeDiv = postalCodeDiv; 


    if(self.cardType == "American Express"){ 
     return self.postalCodeDiv(true); 
    } 
    else{ 
     return self.postalCodeDiv(false); 
    } 

} 

function MakePaymentViewModel(cardType) { 
    var self = this; 

    self.postalCodeDiv = ko.observable(false); 

    self.cardTypeList = [ 
     {type: '-'}, 
     {type: 'Visa'}, 
     {type: 'MasterCard'}, 
     {type: 'American Express'} 
    ]; 

    self.cardType = ko.observableArray([ 
     new cardTypeSelection(self.cardTypeList[0], self.postalCodeDiv) 
    ]); 

} 

ko.applyBindings(new MakePaymentViewModel()); 

而且在它的選擇，我將它傳遞給函數基礎上的價值，以啓用/禁用選擇

Answer 1

我認爲你可以比你想象的容易得多。不太清楚爲什麼你試圖將選定的值從下拉列表中存儲到一個數組中，您可以將選定的值存儲到一個可觀察值中並根據此值切換div可見性。

jsFiddle

視圖模型：

function MakePaymentViewModel(cardType) { 
var self = this; 

self.cardTypeList = [ 
    {type: '-'}, 
    {type: 'Visa'}, 
    {type: 'MasterCard'}, 
    {type: 'American Express'} 
]; 

self.cardType = ko.observable(self.cardTypeList[1]); 

} 

ko.applyBindings(new MakePaymentViewModel()); 

HTML：

<label for="Card Type">Card Type</label> 
<select data-bind='value: cardType, options: $root.cardTypeList, optionsText: "type"'> 
</select>  

<div data-bind="visible: cardType() == cardTypeList[3]"> 
    <label for="PostalCode">Postal Code (required for AMEX) 
    </label> 
</div> 

Answer 2

作爲替代通過提供@infadelic接受的答案，這裏是使用計算機的示例觀察到的。如果你在多個地方需要這個邏輯，你可能想把它作爲一個計算的觀察值放入你的viewModel中，而不是在多個綁定中重複邏輯。

小提琴：http://jsfiddle.net/6ymwN/12/

視圖模型

function MakePaymentViewModel(cardType) { 
var self = this; 

self.postalCodeDiv = ko.observable(false); 

self.cardTypeList = [ 
    {type: '-'}, 
    {type: 'Visa'}, 
    {type: 'MasterCard'}, 
    {type: 'American Express'} 
]; 

self.cardType = ko.observableArray([ 
    new cardTypeSelection(self.cardTypeList[0], self.postalCodeDiv) 
]); 

self.selectedCardType = ko.observable(); 

self.isAmex = ko.computed(function(){ 
    var card = self.selectedCardType(); 
    return card == 'American Express'; 
}); 
} 

HTML

<label for="Card Type">Card Type</label> 
    <select data-bind='value: cardType, options: $root.cardTypeList, optionsText: "type", optionsValue: "type", value: selectedCardType'> 
</select>  

<div data-bind="visible: isAmex()"> 
    <label for="PostalCode">Postal Code (required for AMEX) 
    </label> 
</div>