data-bind visible - multiple conditions

[Gregg]

Is it possible to data-bind the visible property in MVVM to multiple conditions, either by using logical operators (&&) or calling a function that accepts parameters?

<div id='test' data-bind='visible: condition1 && condition2'>...</div>

or

<div id='test' data-bind='visible: myShowFunction('a', 'b')'>...</div>

 

 

 

[Veselin Tsvetanov]

Hello Gregg,

There are two approaches, that might be applicable in the described scenario. First, if you need to pass parameters from the markup to the ​myShowFunction, you should pass them concatenated in a single string: 

<div id="test" data-bind="visible: myShowFunction('falseqtrue')">Test visibility</div>

Then you could split and evaluate them:

var viewModel = kendo.observable({
  myShowFunction: function(values) {
    var array = values.split('q');
    var a = (array[0] == 'true');
    var b = (array[1] == 'true');
    return a && b
  }
});

kendo.bind('body', viewModel);

Alternatively, if the conditions are part of the ViewModel, you could evaluate them in simple function bound to the visible option:

<div id="test" data-bind="visible: testConditions">Test visibility</div>

and:

var viewModel = kendo.observable({
  myShowFunction: function(values) {
    var array = values.split('q');
    var a = (array[0] == 'true');
    var b = (array[1] == 'true');
    return a && b
  }
});

kendo.bind('body', viewModel);

Regards,
Veselin Tsvetanov
Progress Telerik

[Clint]

Did you mean to post the "myShowFunction" example twice?  I'm guessing your "testConditions" binding is different.  Would you mind posting that example?

[Dimitar]

Hello Clint,

The second approach that my colleague Veselin suggested is to use a simple function to evaluate ViewModel fields:

<div data-bind="visible: visibleTextBox">

  <label for="amount">Textbox 1: </label>

  // ...

</div>

 

<script>

  var viewModel = kendo.observable({   

    selectedOption: 1,

    visibleTextBox: function() {

      var selectedOptionValue = this.get('selectedOption');



      if(selectedOptionValue == 3) {

        return true;

      } else {           

        return false;

      }

    }

  });

 

  kendo.bind($("body"), viewModel);

</script>

You can review the following Dojo example, where the above approach is demonstrated.

Regards,
Dimitar
Progress Telerik