How to show or hide div div through anchor

Question

For instance:

In the Model view,

//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 <div class="errorData" data-bind="text:errorMsg"/> } else { // Show displayData div and hide errorData div <div class="displayData" data-bind="text:dataDisplay" /> } 

How to implement this by binding

I can use ko attr or visible. But my requirement is to hide / show only the binding. Please suggest me how to do this? Thanks at Advance.

Answer 1

You're right, you just need to use the visible binding, which will only show the HTML element if the value of the observed is NOT null, undefined, or an empty string. This should work:

 <div class="errorData" data-bind="visible: errorMsg, text:errorMsg"/> <div class="displayData" data-bind="visible: dataDisplay, text:dataDisplay" /> 

Also, if "dataDisplay" is really an array, you should use:

 <div class="displayData" data-bind="visible: dataDisplay().length, text:dataDisplay" /> 

Answer 2

Use this method as it will help you decide what you are trying to implement.

 self.ClickLoad=ko.observable(false); self.Enable=ko.observable(); Enable=function(){ self.ClickLoad=ko.observable(true); console.log(self.ClickLoad); } <div data-bind="visible: Enable()"> <p>sjknscjksnajcn</p> </div>