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>