KnockoutJS中的可見綁定無法正常工作？

我有一個下拉框，包括'狗'，'貓'，'熊'。當用戶選擇'貓'或'狗'時，我想在選擇框前面顯示一個輸入框。所以，我使用的是可見的結合做到這一點：KnockoutJS中的可見綁定無法正常工作？

<select data-bind="options:animals, value: animal"</select> 
<input data-bind="value: description, visible: showDescription"/>

self.showDescription=ko.observable(false); 

self.showOtherDescription = function() { 
    if(animal == 'cat' || animal == 'dog'){ 
    self.showDescription=ko.observable(true); 
    } 
}

加載頁面時，它正在工作。但是，當我從下拉菜單中將選項更改爲「熊」時，它不會隱藏輸入框。有人有任何想法嗎？

來源

2015-11-06 Nisman

發佈時，請確保您的示例代碼是一個完整的但最小的repro，並且至少在語法上是正確的。 – Jeroen

我認爲你是分配給觀察到的，而不是在「showOtherDescription」功能使用可觀察到的函數調用，試試這個

//self.showDescription=ko.observable(true); 
self.showDescription(true);

來源

2015-11-06 16:48:46

的showDescription觀察到確實應該是計算功能來驅動<input>的知名度在視圖元素：

self.showDescription = ko.computed(function(){ 
    return (animal() === 'cat' || animal() === 'dog'); 
});

來源

2015-11-06 16:48:52 dfperry

您的代碼正在顯示輸入框。但我的問題是，當我在下拉菜單中將選項更改爲「承載」時，它不會隱藏輸入框。輸入框如何知道該選項已更改？ – Nisman

哦，我猜「動物」也是可觀察的？我會更新我的回答 – dfperry

，但沒有看到更多的代碼或工作小提琴，沒有什麼我可以幫助 – dfperry

這是去IMO方式：

var ViewModel = function() { 
 
    var self = this; 
 
    
 
    self.animals = ['', 'cat', 'dog', 'mouse', 'bird']; 
 
    
 
    self.animal = ko.observable(''); 
 
    
 
    self.description = ko.observable(''); 
 

 
    self.showOtherDescription = ko.computed(function() { 
 
    return self.animal() === 'cat' || self.animal() === 'dog'; 
 
    }); 
 
}; 
 

 
ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<select data-bind="options: animals, value: animal"></select> 
 
<input data-bind="value: description, visible: showOtherDescription"/>

它改變/添加幾件事情需要你的代碼：

，則不需要showDescription，至少不會在你張貼的所有事情的背景;
showOtherDescription需要爲computed，因此在依賴關係更新時進行更新;
showOtherDescription不應該有一個「setter」函數或副作用來改變其他可觀察量。如果你確實需要這樣的setter，可以看看可寫的計算的可觀察值;
如果您使用animal作爲雙向綁定屬性，則它需要爲observable，因此需要作爲函數調用，以便獲得的值。
我不確定您發佈的代碼是如何工作的，因爲參考animal就像animal == 'cat'以及一樣在視圖中使用它。我認爲它應該公開暴露在ViewModel上，因此您應該將其稱爲self.animal。

來源

2015-11-06 18:48:41 Jeroen

KnockoutJS中的可見綁定無法正常工作？

回答

相關問題