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

当访问非平凡的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。

Answer 2

Sean的答案对于绑定中的类型语法是正确的。

但是，如果您担心创建过多的dependentObservable并且不想在绑定中使用完整表达式，那么您可以使用简单的函数。 KO绑定在dependentObservables内部执行，因此任何被访问的可观察对象都将为该绑定创建依赖关系。这意味着您可以创建如下函数：

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/

将可见性与敲除中的表达结合

2 个答案: