Kendo UI MVVM - How to get the opposite or NOT or ! of a binary variable when data-binding

Question

What I want to do is this:

<input data-bind="value: Adult.FirstName, visible: editable" />
<span data-bind="text: Adult.FirstName, visible: !editable"></span>

viewModel = kendo.observable({
    editable: false
});

But I get the error:

Uncaught SyntaxError: Unexpected token !

The only ways I’ve been able to figure out how to do it are:

<input data-bind="value: Adult.FirstName, visible: editable" />
<span data-bind="text: Adult.FirstName, visible: not('editable')"></span>

viewModel = kendo.observable({
    editable: false,
    not: function(value) { return !this.get(value);},
});

and:

<input data-bind="value: Adult.FirstName, visible: editable" />
<span data-bind="text: Adult.FirstName, visible: notEditable"></span>

viewModel = kendo.observable({
    editable: false,
    notEditable: function() { return !this.get("editable");},
});

But I would rather just keep track of the one variable with no extra functions.

Answer 1

You can just use the invisible data bind.

http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/invisible

Or you can monitor the change event of your viewModel, check for editable changing, and change a second viewModel property to the opposite value. Then you'd have two properties, but really only have to manage one of them.