CODEWITHSUNDEEP
jqueryknockout.js
Sam
Sam

Reputation: 14596

adding effect to knockout "if" binding

I've found examples in the knockout.js documentation on how to add a jquery effect when toggling the visible binding or even using the beforeRemove event of the 'foreach' binding.

However, I have not found out how to add a jquery effect when toggling the "if" binding

Consider the following code:

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

How would I add a jquery fadeIn effect when IsVisible returns true ?

Upvotes: 4

Views: 1134

Answers (1)

Michael Best
Michael Best

Reputation: 16688

You cannot use the if binding directly, but using a custom binding within the if binding would do the trick:

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

Handler:

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

Example: http://jsfiddle.net/mbest/fpnTH/

Upvotes: 6

Related Questions