Question

我有一个下拉框，包括＆＃39; dog＆＃39;，＆＃39; cat＆＃39;＆＃39; bear＆＃39;。我想在用户选择“cat＆＃39;”时，在选择框前面显示一个输入框。或者＆＃39; dog＆＃39;。所以我使用可见绑定来做到这一点：

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

加载页面时它正在工作。但当我将选项更改为“承诺”时从下拉列表中它不会隐藏输入框。有人有任何想法吗？

Answer 1

showDescription observable实际上应该是计算函数来驱动视图上<input>元素的可见性：

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

Answer 2

这是去IMO的方式：

＆＃13;

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

＆＃13;

<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"/>

＆＃13;

它会改变/添加一些代码：

不需要showDescription，至少不在您发布的内容的背景下;
showOtherDescription必须是computed，以便在更新相关性时更新;
showOtherDescription不应该有＆＃34; setter＆＃34;改变其他可观察物的功能或副作用。如果你确实需要这样的setter，请查看可写计算的observables;
如果您使用animal作为双向绑定属性，则它必须是observable，因此需要作为获取其值的函数调用。
我不确定您发布的代码是如何工作的，因为animal与animal == 'cat' 一样，也可以在视图中使用它。我认为它可能应该在ViewModel上公开公开，因此您应该将其称为self.animal。

Answer 3

我认为你正在分配给observable，而不是在＆＃34; showOtherDescription＆＃34;中使用observable函数调用。功能，试试这个

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

KnockoutJS中的可见绑定无法正常工作？

3 个答案: