7

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.

Sam
  • 125
  • 4
  • 7

1 Answers1

15

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.

Robin Giltner
  • 3,057
  • 2
  • 18
  • 26
  • I can't tell you how many times I've looked at that page in their documentation about MVVM and didn't see the bindings folder or click on it. What a wealth of information in that folder! Several other questions I've left unanswered were just answered. Thank you! – Sam Feb 07 '14 at 19:26
  • 1
    The invisible trait will solve this particular use case. Thank you. So I guess the broader question of being able to do a !someVariable is just not allowed in kendo MVVM due to separation of concerns. – Sam Feb 07 '14 at 19:28
  • 1
    i have the same issue i need the css bind if NOT, and i would love to be able to just add ! – CMS Mar 27 '16 at 04:01