Question

我试图用虚拟fadeVisible淡化整个列表 - 我不能使用容器元素，所以之前我使用的是这样的结构：

<!-- ko if: show -->
<!-- ko foreach: items() -->
<div data-bind="text: name"></div>
<!-- /ko -->
<!-- /ko -->

现在，我有这个：

<!-- ko fadeVisible: show -->
<!-- ko foreach: items() -->
<div data-bind="text: name"></div>
<!-- /ko -->
<!-- /ko -->

使用以下bindingHandler：

ko.bindingHandlers.fadeVisible = {
        init: function(element, valueAccessor) {
            var value = valueAccessor();
            $(element).toggle(ko.utils.unwrapObservable(value)); // Use "unwrapObservable" so we can handle values that may or may not be observable
        },
        update: function(element, valueAccessor) {
            var value = valueAccessor();
            ko.utils.unwrapObservable(value) ? $(element).fadeIn() : $(element).fadeOut();
        }
    };  

ko.virtualElements.allowedBindings.fadeVisible = true;

但由于某种原因，这不起作用。在本地我收到此错误：

无法处理绑定“fadeVisible：function（）{return show（）}” 消息：无法设置未定义的属性'cur'

在JSFiddle上我得到了这个：

Uncaught TypeError: Cannot read property 'display' of undefined

如果我使用getFirstRealElement函数捕获第一个元素并使用它代替element，它可以工作，但我需要整个列表。

我做错了什么？

Answer 1

你不能fadeOut / In虚拟元素。因为虚拟元素与dom元素没有关联。

您尝试执行的操作就像使用可视绑定到虚拟元素一样。如果你这样做，你会收到这个错误：

The binding 'visible' cannot be used with virtual elements.

原因是，可见绑定和你的fadeOut绑定尝试修改一个不存在的dom元素（$（元素）.show（）和$（element）.fadeIn（））。

因此，如果您想要fadeOut / In转换，则无法使用虚拟元素。

简而言之：修改元素样式而不是其流程的绑定不能应用于虚拟元素。

自定义虚拟绑定处理程序无效

1 个答案: