添加效果击倒“if”绑定

时间:2013-03-19 20:50:44

标签: jquery knockout.js

我在knockout.js文档中找到了关于如何在切换可见绑定时添加jquery效果甚至使用'foreach'绑定的beforeRemove事件的示例。

但是,在切换“if”绑定时,我还没有发现如何添加jquery效果

请考虑以下代码:

<table data-bind="with: myModel">
 <tr data-bind="if: IsVisible">
<td>some string</td>
 </tr>
</table>

当IsVisible返回true时,如何添加jquery fadeIn效果?

1 个答案:

答案 0 :(得分:6)

您不能直接使用if绑定,但在if绑定中使用自定义绑定可以解决问题:

<table data-bind="with: myModel">
    <tr data-bind="if: IsVisible">
        <!--ko fadeIn: true-->
        <td>some string</td>
        <!--/ko-->
    </tr>
</table>

处理程序:

ko.bindingHandlers.fadeIn = {
    init: function(element) {
        $(ko.virtualElements.childNodes(element))
            .filter(function () { return this.nodeType == 1; })
            .hide()
            .fadeIn();
    }
};
ko.virtualElements.allowedBindings.fadeIn = true;

示例:http://jsfiddle.net/mbest/fpnTH/