How to display or hide the div through binding

Question

For Eg: In viewModel, ``` //Makes webApi call to get the data from some repository function GetData() { var data = http.get(apiUrl) .success(function (result) { if (result != null || result !='') { // success display the data vm.dataDisplay; } else { vm.errorMsg('No data'); } }) ``` //viewModel ``` var vm = { activate: activate, dataDisplay: ko.observableArray(), errorMsg:ko.observable(''), }; vm.activate(); return vm; ``` //view. Expected. ``` If( errorMsg == 'No Data') { // show errordata div and hides displayData div

} else { // Show displayData div and hide errorData div

} ``` How to implement this through binding?? I can use ko attr or visible. But my requirement is to hide/show through binding only. Please suggest me how to do this? Thanks in Advance.

Accepted Answer

You are right, you just need to use the `visible` binding, which would only show the HTML element if the value of the observable is NOT a null, undefined, or empty string. This should work: ```

``` Also, if "dataDisplay" is indeed an array, you have to use: ```

```

How to display or hide the div through binding

Solution

Problem