将可见性绑定到淘汰赛中的表达式

Question

我有一系列图像，我希望一次只显示一个，基于我的 viewModel 上的可观察属性。

我想要的是这样的：

<img src="a.jpg" data-bind="visible: type == 'a'" />
<img src="b.jpg" data-bind="visible: type == 'b'" />
<img src="c.jpg" data-bind="visible: type == 'c'" />

...

'type' 在我的 viewModel 上是一个简单的 ko.observable 属性。当'type' 的值发生变化时，上述绑定不起作用。我的解决方法是为每个潜在类型创建一个dependentObservable，如下所示：

viewModel.isA = ko.dependentObservable(function(){
    return this.type() == 'a';
}, viewModel);

这可行，但它会导致我的代码变得非常大。我觉得表达式绑定应该可以工作，而且我可能只是稍微偏离了语法。有没有一种干净的方法可以做到这一点？

Answer 1

关于绑定中类型的语法，Sean 的回答是正确的。

但是，如果您担心创建了太多dependentObservables 并且不希望绑定中的完整表达式，那么您可以使用一个简单的函数来代替。 KO 绑定在dependentObservables 内部执行，因此任何被访问的observables 都会为该绑定创建一个依赖项。这意味着您可以创建如下函数：

viewModel.isType = function(type) {
  return type === this.type();
};

然后您可以像这样使用它：（绑定也称为visible 而不是visibility）

<img src="a.jpg" data-bind="visible: isType('a')" />
<img src="b.jpg" data-bind="visible: isType('b')" />
<img src="c.jpg" data-bind="visible: isType('c')" />

这是一个示例：http://jsfiddle.net/rniemeyer/kbC2k/

Answer 2

在非平凡的 Knockout data-bind 表达式中访问数据时，您需要将 observable 作为函数调用以获取基础值：

<img src="a.jpg" data-bind="visible: type() == 'a'" />
<img src="b.jpg" data-bind="visible: type() == 'b'" />
<img src="c.jpg" data-bind="visible: type() == 'c'" />

但是，如果您在 data-bind 属性中使用了很多重要的表达式，您最好创建一个 custom binding。