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

kendo-ui, mvvm

Solution

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.

Problem

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.

Original source