0

我正在尝试根据列表中的选择显示或隐藏 div。我不太确定如何处理传递给函数的 div 的 observable，以便它可以返回 true 或 false 值来显示或隐藏 div。

如果从列表中选择“美国运通”，我想显示“postalCodeDiv”，否则隐藏它。

我在这里有一个小提琴

<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());

在选择它后，我将它传递给一个函数以根据选择的值启用/禁用

4

2 回答 2

1

作为@infadelic 提供的已接受答案的替代方案，这里是一个使用计算可观察的示例。如果您在多个地方需要此逻辑，您可能希望将其作为计算的 observable 放入 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>
于 2013-08-27T18:42:46.997 回答
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>
于 2013-08-27T18:18:39.817 回答