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

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属性中使用了大量非平凡的表达式,则最好创建自定义绑定.

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/