Kendo Bind Visible to Opposite of Value - kendo-ui

Question

I believe I already know the answer to this, but in kendo are you able to bind a DOM element's visibility to the opposite of if a value in the observable is null or false?
For example: the normal behavior is to show a <div> that has content the user needs to manipulate as part of a "step". I want to give the user the option to skip this step. To do this, I add a checkbox that says "skip" and in it I bind its value to the property IsSkip:
<input id="checkbox-allow-skip" type="checkbox" data-bind="value: IsSkip" />
Can I then bind the <div>'s visibility to the opposite of IsSkip like this (pseudo code for data-bind):
<div id="optional-step" data-bind="visible: !IsSkip">
<!-- ... -->
</div>
Edit - I believe that it may be worth noting that currently I'm generating the onchange event of the checkbox and setting the value of a new property named CannotSkip to the opposite of IsSkip and binding the visibility to CannotSkip.

Answer 1

As you're probably already aware, you can't invert the value of the property within your binding expression as per your pseudo code due to the way the binding is constructed. However, the visible reference which appears in the binding expression is not a reference to a DOM attribute, it's actually a reference to a kendo binder which has a counterpart, the invisible binder which inverts the value for you. Hence the simplest solution to your problem is just this:
<div id="optional-step" data-bind="invisible: IsSkip">
<!-- ... -->
</div>
Eventually however, you're sure to encounter a situation where this won't solve the problem for you e.g. perhaps the visibility depends on the state of several flags? This type of scenario is best handled by binding to a function instead where you can execute whatever logic is necessary. The most important thing to remember when you use this approach is to manipulate any properties of your view-model using the get and set methods of the observable object. This ensures that any bindings to your function will be refreshed when any of those properties change; in kendo parlance this is known as a dependent method. You could solve your problem using this approach, like so:
var viewModel = kendo.observable({
IsSkip: false,
CannotSkip: function() {
return !this.get("IsSkip");
}
});
<div id="optional-step" data-bind="visible: CannotSkip">
<!-- ... -->
</div>