data-binding - 将可见性绑定(bind)到 knockout 中的表达式

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' 的值时，上述绑定(bind)不起作用变化。我的解决方法是为每个潜在类型创建一个dependentObservable，如下所示:

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

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

Answer 1

关于绑定(bind)中类型的语法，肖恩的回答是正确的。

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

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

然后您可以像这样使用它:(绑定(bind)也称为 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/